Button
Buttons are used to perform actions, with different visuals for different needs.
Props
| prop | type | default |
|---|---|---|
| type |
"button" | "submit" | "reset"
Button type, only applied when href is not set.
|
"button" |
| variant | "primary" | "secondary" | "negative" | "utility" | "link" | "pill" | "secondary" |
| quiet | boolean | false |
| small | boolean | false |
| loading | boolean | false |
| href |
string
Set the href for the location where clicking the button will take you to.
|
- |
| target |
string
Anchor target, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a.
|
- |
| rel |
string
The relationship of the linked URL.
|
"noopener" |
Visual Options
Variants
Quiet
By default, buttons have a visible stroke and fill. Quiet buttons do not have this
visible stroke or fill and should only be used for secondary actions within a button
group. Quiet buttons have the same padding rules as other action buttons and reveal a
button-like background color when hovered.
Quiet secondary button
Quiet negative button
Quiet utility button
Link
Buttons will be rendered as an anchor (a tag) if they use an href attribute.
Button as anchor
Loading state
To show the user that the action they triggered has begun, buttons have an in progress
or loading state.
Primary button loading
Disabled state
Disabled is an anti-pattern and is not supported. There will ALWAYS be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.
Accessibility
If the button doesn't have visible text content, such as when used with only an icon, an
aria-label prop must be provided for accessibility.