Button

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

  • @primer/react@37.0.1
  • Alpha
  • Not reviewed for accessibility

Import

import {Button} from '@primer/react'

Examples

View in Storybook

Props

Button

NameDefaultDescription
alignContent
'start' | 'center'

Content alignment for when visuals are present.

as
'button'React.ElementType
block
boolean

Allow button width to fill its container.

childrenRequired
React.ReactNode

The content of the button.

count
number | string

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.

leadingIconDeprecated
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
'medium''small' | 'medium' | 'large'
sx
SystemStyleObject
trailingIconDeprecated
React.ComponentType<OcticonProps>

An icon to display after the button text.

trailingVisual
React.ElementType

A visual to display after the button text.

variant
'default''default' | 'primary' | 'danger' | 'invisible'

Change the visual style of the button.

labelWrap
falseboolean

Whether the button label should wrap to multiple lines of it is longer than the button width.

Navigated to Button