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