Button

Ready to use

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

Block

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.

Polymorphism

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

Component props

Name	Type	Default	Description
`leadingVisual`	`ReactElement`	`undefined`	The leading visual appears before the button content
`trailingVisual`	`ReactElement`	`undefined`	The trailing visual appears after the button content
`variants`	`'primary'`, `'secondary'`, `'subtle'`	`'secondary'`	The styling variations available in Button
`size`	`'small'`, `'medium'`, `'large'`	`'medium'`	The size variations available in Button
`block`	`boolean`	`false`	The full-width option available in Button
`hasArrow`	`boolean`	`false`	Deprecated. The `hasArrow` prop will be removed in a future release.
`disabled`	`boolean`	`false`	Disables the rendered element using `disabled` or `aria-disabled` attributes based on the element type.