Button

Install the component dependency:

Include a React component in your project:

Name
Value
Description
Default
appearance
primary | stroke | flat
visual style (from Button.appearances)
primary
disabled
boolean
standard input disable flag
false
icon
Icon
Icon component
iconAlign
left | right
horizontal icon placement (from Button.iconAligns)
left
innerRef
DOM element => ()
react ref callback
loading
boolean
disables button and shows spinner
false
size
xSmall | small | medium | large
button 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. Please provide a title prop to display the native tooltip as well as to support assitive technology(i.e. screen readers).

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.