Button

Button is used to initiate actions on a page or form.

Page navigation navigation

React

readyNot reviewed for a11y

Storybook|Source

Rails

readyNot reviewed for a11y

Docs|Lookbook|Source

Figma

View in Figma|

React examples

Default

<Button>Activate</Button>

<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>

<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>

<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>

<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>

<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>

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

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>

<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>

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

Inactive

Inactive state guidelines

<Button inactive>Activate</Button>

<Button inactive>Activate</Button>

Name	Required	Description
alignContent		`'start' \| 'center'` Content alignment for when visuals are present.
as		`React.ElementType`
block		`boolean` Allow button width to fill its container.
children	Required	`React.ReactNode` The content of the button.
count		`number` For counter buttons, the number to display.
inactive		`boolean` Whether the button looks visually disabled, but can still accept all the same interactions as an enabled button. This is intended to be used when a system error such as an outage prevents the button from performing its usual action. Inactive styles are slightly different from disabled styles because inactive buttons need to have an accessible color contrast ratio. This is because inactive buttons can have tooltips or perform an action such as opening a dialog explaining why it's inactive. If both `disabled` and `inactive` are true, `disabled` takes precedence.
leadingIcon Deprecated		`React.ComponentType<OcticonProps>` An icon to display before the button text.
leadingVisual		`React.ElementType` A visual to display before the button text.
loading		`boolean` When true, the button is in a loading state.
loadingAnnouncement		`string` The content to announce to screen readers when loading. This requires `loading` prop to be true
ref		`React.RefObject<HTMLButtonElement>`
size		`'small' \| 'medium' \| 'large'`
sx		`SystemStyleObject`
trailingIcon Deprecated		`React.ComponentType<OcticonProps>` An icon to display after the button text.
trailingVisual		`React.ElementType` A visual to display after the button text.
trailingAction		`React.ElementType` Trailing action appears to the right of the trailing visual and is always locked to the end
variant		`'default' \| 'primary' \| 'danger' \| 'invisible' \| 'link'` Change the visual style of the button.
labelWrap		`boolean` Whether the button label should wrap to multiple lines of it is longer than the button width.
disabled		`boolean` Avoid disabling buttons because it will make them inaccessible to users who rely on keyboard navigation. Buttons that are disabled can not be clicked, selected, or navigated through.

Button

Page navigation navigation

React examples

Default

Style variants

Full-width

Size variants

With a leading visual

With a trailing visual

With a trailing action

Loading

Inactive

More code examples

Props

Button