Button

Button

Specs

Guideline

Buttons are used to present an action users can take. When triggered, the button initiates an action or redirects the users.

Examples

Intents & Variants

Button comes with

• 3 intents which are primary, secondary, and danger.
• 3 variants which are filled, outlined, and text.

Filled variant

Variants

Primary (Filled)

Outlined variant

Variants

Primary (Outlined)

Text variant

Text button

Primary (Text)

Secondary (Text)

Danger (Text)

Text button with align left



Add attachment

Button with icon

Button icons can either be an icon name or a custom component.

With Icon



Add Item

More





Submit

Disabled button

Disabled

Filled (Disabled)

Outlined (Disabled)

Text (Disabled)

Utility button

Utility



Settings



Filter



Switch / add account

Props

Button

	Prop	Required	Default	Type
	onPress	required		() => void
	text	required		ReactChild
	accessibilityHint			string
	accessibilityLabel			string
	disabled		false	boolean
	icon			ReactNode
	intent		primary	"primary" | "danger" | "secondary"
	loading		false	boolean
	rightIcon			ReactNode
	style			StyleProp<ViewStyle>
	testID			string
	variant		filled	"text" | "filled" | "outlined"

Button.Icon

	Prop	Required	Default	Type
	icon	required		"number" | "activate" | "add-emoji" | "add-person" | "adjustment" | "alignment" | "antenna" | "archive" | "assignment-warning" | "bank" | "bell" | "billing" | "bolt" | "bookmark-added" | ... 417 more ... | "wellness-outlined"
	disabled			boolean
	hitSlop			number | Insets
	intent			"warning" | "success" | "info" | "text" | "primary" | "danger" | "secondary" | "disabled-text" | "text-inverted"
	onPress			() => void
	size			"small" | "medium" | "large" | "xlarge" | "xsmall"
	style			StyleProp<ViewStyle>
	testID			string

Button.Utility

	Prop	Required	Default	Type
	icon	required		"number" | "activate" | "add-emoji" | "add-person" | "adjustment" | "alignment" | "antenna" | "archive" | "assignment-warning" | "bank" | "bell" | "billing" | "bolt" | "bookmark-added" | ... 417 more ... | "wellness-outlined"
	onPress	required		() => void
	text	required		ReactChild
	intent		text	"text" | "primary"