Button

React examples

Default

<Button>Activate</Button>

Style variants

• Primary: Highest-priority action; use sparingly. Never put more than one in a group of buttons, and rarely use more than one per page.
• Default: Default style for general actions. They can be paired with a primary Button to perform a secondary action.
• Invisible: Transparent for minimal UI or compound components like ActionList.
• Danger: Used sparingly for destructive actions, typically prompt a confirmation dialog.

<Stack direction="horizontal" align="center">
  <Button variant="primary">Primary</Button>
  <Button variant="default">Default</Button>
  <Button variant="invisible">Invisible</Button>
  <Button variant="danger">Danger</Button>
</Stack>

Full-width

<Button block>Activate</Button>

Size variants

• Medium (default): Best for most interfaces.
• Small: For compact spaces or less prominent actions.
• Large: Use sparingly to emphasize an action. More often than not a medium sized Button will be more appropriate.

<Stack direction="horizontal" align="center">
  <Button size="small">Small</Button>
  <Button>Medium (default)</Button>
  <Button size="large">Large</Button>
</Stack>

With a leading visual

Leading visuals add context to Button labels. For example, a “search” icon next to the label for a search field submit.

<Button leadingVisual={RocketIcon}>Activate</Button>

With a trailing visual

Trailing visuals such as counters display additional information about the action or task at hand.

<Button trailingVisual={DownloadIcon}>Download</Button>

With a trailing action

Trailing actions (for example: a triangle icon to indicate a dropdown) are fixed at the Button's end. The Button label and leading visual is center-aligned for calls-to-action and left-aligned for buttons that toggle a selection UI (for example: Weeks ▾, Iteration ▾, Sort ▾, etc).

<Button trailingAction={TriangleDownIcon}>Activate</Button>

Loading

Use a loading state while waiting for action completion. See Button loading state for accessibility details.

<Button loading={true}>Activate</Button>

Inactive

Inactive state guidelines

<Button inactive>Activate</Button>

More code examples

The previous examples are a curated subset of the full capabilities of the Button component. For more examples, see the Button Storybook stories.

Props