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>

PropertyTypeValuesDescription
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" "arrowLeft" "arrowRight" "bell" "book" "close" "cube" "emoji" "exclamation" "externalLink" "grid" "lightBulb" "link" "menu" "play" "spinner" "template"
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" "arrowLeft" "arrowRight" "bell" "book" "close" "cube" "emoji" "exclamation" "externalLink" "grid" "lightBulb" "link" "menu" "play" "spinner" "template"
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.

References