Button

Note

The click event is set by the onPress prop.

<Button>Hi, I'm a button!</Button>

<Button icon={icons.emptyCircle} />

<Button
	icon={icons.emptyCircle
>
	Hi, I'm a button!
</Button>

Button groups

If buttons are related, they can be grouped with a ButtonGroup.

<ButtonGroup>
	<Button>First</Button>
	<Button>Second</Button>
	<Button>Third</Button>
</ButtonGroup>

Button groups improve focus behavior - instead of having to Tab through each button, the group is treated as a single focusable element that can be navigated with left/right arrows.

Vertical group

In this case, the focus navigation is handled with up/down arrows.

<ButtonGroup
	vertical
>
	<Button>First</Button>
	<Button>Second</Button>
	<Button>Third</Button>
</ButtonGroup>

Note

By default, vertical button groups take up the full width of their container.

Highlighted props

For the complete list of props, use your IDE's autocomplete functionality.

Sizes

<Button
	size='small'
>
	Hi, I'm a button!
</Button>

Types

<Button
	type='ghost'
>
	Hi, I'm a button!
</Button>

Tooltip

<Button
	icon={icons.emptyCircle}
	tooltip="Hi, I'm a tooltip!"
/>

Note

If text label is not set, please set the aria-label prop to ensure accessibility.

When aria-label is set, tooltip can be just passed without value. In that case it will take the value from aria-label.

Pending

If you want to show a pending state, you can use the pending prop. It will replace the button content with a loading indicator, announce an action, and disable the button.