Install the component dependency:

Include a React component in your project:

appearanceprimary | stroke | flatvisual style (from Button.appearances)primary
disabledbooleanstandard input disable flagfalse
iconIconIcon component
iconAlignleft | righthorizontal icon placement (from Button.iconAligns)left
innerRefDOM element => ()react ref callback
loadingbooleandisables button and shows spinnerfalse
sizexSmall | small | medium | largebutton size (from Button.sizes)medium

Buttons come in three standard visual styles.

Buttons come in four standard sizes. The default size is 'medium'.

Buttons may include an icon to the left or right of the label. Read more icon docs.

Buttons may include an icon without a label. Read more icon docs.

Each button may be displayed as disabled. Do not use disabled treatment for non-disabled buttons.

Elements that are visually equivalent to buttons but change the URL and link to a new experience should be rendered as HTML anchor tags. Provide an href prop, and the button will render as an anchor tag.

To show a spinner, pass a loading flag to your button. By default, it replaces your icon. If no icon is present, it replaces your text.

To specify the light theme, wrap your components in a Theme component.