Button
Use button for the main actions on a page or form.
import {Button} from '@primer/react'
This is the default variant for the Button component.
The danger variant of Button is used to warn users about potentially destructive actions
The invisible variant of Button indicates that the action is a low priority one.
Button component supports three different sizes. small, medium, large.
We can place an icon inside the Button in either the leading or the trailing position to enhance the visual context.
It is recommended to use an octicon here.
A separate component called IconButton is used if the action shows only an icon with no text. This button will remain square in shape.
IconButton also supports the three different sizes. small, medium, large.
To show a count value as a trailing visual inside Button, pass a value to the count prop. The counter will match the variant styles of the parent button.
Use the block prop for full width buttons.
| Name | Type | Default | Description |
|---|---|---|---|
| alignContent | 'start' | 'center' | Content alignment for when visuals are present. | |
| as | React.ElementType | 'button' | The underlying element to render — either a HTML element name or a React component. |
| block | boolean | Allow button width to fill its container. | |
| children Required | React.ReactNode | The content of the button. | |
| count | number | string | For counter buttons, the number to display. | |
| disabled | boolean | Items that are disabled can not be clicked, selected, or navigated through. | |
| 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 | |
| leadingIcon Deprecated | React.ComponentType<OcticonProps> | An icon to display before the button text. | |
| leadingVisual | React.ElementType | A visual to display before the button text. | |
| ref | React.RefObject<HTMLButtonElement> | ||
| size | 'small' | 'medium' | 'large' | 'medium' | |
| 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. | |
| variant | 'default' | 'primary' | 'danger' | 'invisible' | 'default' | Change the visual style of the button. |
| labelWrap | boolean | false | Whether the button label should wrap to multiple lines of it is longer than the button width. |
Additional props are passed to the <button> element. See button docs for a list of props accepted by the <button> element. | |||