Skip to main content

Standalone component page

An example of a component page, featuring descriptions, prop tables and editable code snippets.

Ready to useReviewed 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.

Loading

Primary

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

Loading

Subtle

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

Loading

Sizes

Loading

Block

Loading

Removing the arrow

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

Loading

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.

Loading

Animation

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.

Loading

Polymorphism

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

Loading

Inline

Loading

Component props

Label

NameTypeDefaultDescription
propOneReactElementundefinedDescription of my prop
propTwo'single', 2
undefinedDescription of my prop