Button
Button is used to initiate actions on a page or form.
On this page
- @primer/react@37.0.1
- Alpha
- Not reviewed for accessibility
On this page
Import
import {Button} from '@primer/react'
Examples
Props
Button
Name | Default | Description |
---|---|---|
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 | |
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 | |
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 | false | boolean Whether the button label should wrap to multiple lines of it is longer than the button width. |