Button

Use Button for the main actions on a page or form.
  • Experimental
  • Reviewed for accessibility
import {Button} from '@primer/react-brand'

Examples

Default

This is the default variant for the Button component. It corresponds to the secondary variant appearance.

Primary

The primary variant of Button indicates that the action is of high priority, and should be used sparingly.

Subtle

The subtle variant of Button indicates that the action is a low priority one.

Sizes

Removing the arrow

The animated arrow indicator can be removed using the hasArrow prop.

Using an icon

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

Use a trailing visual if the button action involves selecting items (dropdown, select, filter, etc), and a leading visual to provide visual context to the adjacent label. E.g. Use a search icon for a search field submit action.

Polymorphism

The Button component can render as a button or a HTML element. By default, it will render as a button.

Component props

Button

NameTypeDefaultDescription
leadingVisualReactElementundefinedThe leading visual appears before the button content
trailingVisualReactElementundefinedThe trailing visual appears after the button content
variants'primary'
'secondary'
'subtle'
'secondary'The styling variations available in Button
size'medium'
'large'
'medium'The size variations available in Button
hasArrowbooleantrueA flag to show/hide the arrow icon