Toolbar

A toolbar provides convenient access to frequently used commands and controls that perform actions relevant to the current view.

 Do Label should be a verb and one word is preferred, for example `Cancel`, `Submit`. Cancel Submit  Do The priority should be: primary -> secondary -> success -> info -> warning -> danger. The higher priority should be placed on the right. Reset Cancel Submit

 Don't Label should be short. For example, when the users access Create Leave Request screen, they know they are acting on Leave Request. So, `Cancel` is meaningful enough instead of `Cancel Leave request` . Cancel Leave Request Submit





Print

Inbox

Example

Example 1: Basic usage

Toolbar can be configure with 3 variants of action items: text-only action, icon-only action and text with icon action.





Print

Inbox

Example 2: Toolbar action items

Toolbar action items come with 6 intent: primary, secondary, success, danger, info, warning. Toolbar action item can be disabled via disabled prop.

Reset

Cancel

Submit

Toolbar.Message

Toolbar.Message is a component that can be used to display a message input in the toolbar.





Example

Example 1: Toolbar message with cutom prefix and suffix



Props

Toolbar.Group Props

DEPRECATED

Toolbar's align = left and align = center are deprecated. Use align = right instead.

	Prop	Required	Default	Type
	align		right	"center" | "right" | "left"
	items		[]	ToolbarItemProps[]

ToolbarItem Config Props

	Prop	Required	Default	Type
	disabled		false	boolean
	icon			"number" | "activate" | "add-emoji" | "add-person" | "adjustment" | "alignment" | "antenna" | "archive" | "assignment-warning" | "bank" | "bell" | "billing" | "bolt" | "bookmark-added" | ... 450 more ... | "wellness-outlined"
	intent		primary	"warning" | "success" | "info" | "primary" | "danger" | "secondary"
	label			string
	onPress			() => void
	style			StyleProp<ViewStyle>

Toolbar.Message Props

	Prop	Required	Default	Type
	accessibilityLabelledBy			string
	disabled			boolean
	editable			boolean
	maxLength			number
	placeholder			string
	prefix			React.ReactNode
	style			StyleProp<ViewStyle>
	suffix			React.ReactNode
	testID			string
	textStyle			StyleProp<TextStyle>