Install the component dependency:
Include a React component in your project:
appearanceprimary | secondary | stroke | flatButton.appearances)primarydisabledfalsehreficonIconiconAlignleft | rightButton.iconAligns)leftinnerRefloadingfalsesizexSmall | small | medium | largeButton.sizes)mediumButtons 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.
Many users of this component are using it in conjunction with react-router. If you'd like to do the same and use Button to trigger react-router links, you can follow this pattern.
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.