v0.27.0
Buttons are calls to action used throughout the product experience. Buttons Design Guidelines.
Edit the code below to see your changes live!
Prop Name | Type | Default | Description |
---|---|---|---|
actionType | normal | destructive | normal | Indicates whether your button's action is of normal or destructive nature. |
iconLeft | Icon |
| Pass in an Icon component to display to the left of the text. |
iconOnly | Icon |
| Pass in an Icon component to replace content with an icon. |
iconRight | Icon |
| Pass in an Icon component to display to the right of the text. |
isLoading | boolean | false | Used to determine if component is in a loading state. |
mobileWidth | auto | 100% | 100% | Determines the width in mobile viewport. |
variant | primary | secondary | subtle | primary | Determines which style of button to display. |
Props ending with * are required
Margin Props
There are three types of variants to choose from: primary
, secondary
, and subtle
. You can determine what type of variant by using the variant
prop.
Edit the code below to see your changes live!
There are two action types: normal
& destructive
. They are used to indicate the nature of the action when clicking on the button.
Edit the code below to see your changes live!
The loading state is used when clicking a button will perform a asyncronous action.
Edit the code below to see your changes live!
A disabled state is used to indicate no action can be done using the button by passing a disabled
prop.
Edit the code below to see your changes live!
A button can also include icons on either side of the text (or both). When using iconOnly
, the iconLeft
& iconRight
components will be removed.
Edit the code below to see your changes live!