Buttons
Buttons allow users to take actions. If href is provided, a button-like anchor tag is rendered.
Primary
Secondary
Outline
Danger
Disabled
Icon
<Button>
| Property | Type | Values | Description |
|---|---|---|---|
children | node | The content of the component. For icon-only buttons, set icon and leave this undefined. | |
className | string | A space-delimited list of class names to be merged into the component's outermost element. | |
disabled | boolean | true
false
| Disables this button or link navigation. |
href | string | Designates an navigational link and renders an <a> tag instead of a <button>. | |
icon | string | "adjustments"
"arrowDown"
"arrowLeft"
"arrowRight"
"bell"
"book"
"bookmark"
"check"
"chevronDown"
"close"
"closeSolid"
"cube"
"document"
"edit"
"emoji"
"exclamation"
"exclamationCircle"
"externalLink"
"grid"
"hashtag"
"lightBulb"
"link"
"menu"
"musicNote"
"photograph"
"play"
"presentation"
"selector"
"spinner"
"tag"
"template"
"users"
| The name of the left (or only) icon, optimized for the button's size. |
isLoading | boolean | true
false
| Displays a loading spinner. The button content is made invisible, but still takes up space in the layout so the button size does not change. This also effectively disables the button without making it appear so visually. |
onClick | function | The click handler. This can be specified along with href for links. | |
rightIcon | string | "adjustments"
"arrowDown"
"arrowLeft"
"arrowRight"
"bell"
"book"
"bookmark"
"check"
"chevronDown"
"close"
"closeSolid"
"cube"
"document"
"edit"
"emoji"
"exclamation"
"exclamationCircle"
"externalLink"
"grid"
"hashtag"
"lightBulb"
"link"
"menu"
"musicNote"
"photograph"
"play"
"presentation"
"selector"
"spinner"
"tag"
"template"
"users"
| The name of the right icon, optimized for the button's size. |
size | string | "xs"
"sm"
"md"
"lg"
"xl"
| The size of the button. The default heights for text buttons are: xs = 30px
sm = 34px
md = 38px
lg = 42px
xl = 50px |
target | string | "current"
"new"
| Opens the navigation target in a new tab with no opener. Only applicable to links. |
type | string | "button"
"submit"
| If set to submit, clicking it (or pressing return) will perform the default form submission. This can be captured by the form's onSubmit handler. Only applicable to HTML buttons. |
variant | string | "primary"
"secondary"
"outline"
"danger"
| The variant or color of the button. |