button

A versatile button component that supports multiple style variants, sizes, and states. Can render as a button or anchor element depending on whether an href is provided.
type
Not required
("button" | "submit" | "reset")
HTML button type attribute
className
Not required
string
Custom CSS classes to apply to the button
children
Not required
node
Button content
is
Not required
("primary" | "primary-blue" | "secondary" | "tertiary" | "plain")
Style variant of the button
color
Not required
("red" | "white" | "plain")
Temporary fallback for "is" prop
disabled
Not required
bool
false
Whether the button is disabled
size
Not required
("sm" | "md" | "lg")
"md"
Size of the button: "sm", "md", or "lg"
icon
Not required
elementType
Icon to display before children
href
Not required
string
If provided, renders as an anchor element instead of a button
active
Not required
bool
Used to manage active state in button group
onMouseDown
Not required
func
() => {}
Handler called when mouse button is pressed down
onBlur
Not required
func
() => {}
Handler called when button loses focus
onClick
Not required
func
Handler called when button is clicked
telemetry
Not required
object/enum
Data to emit alongside the "button_click" event. Set to `false` to disable emission.

We use buttons for all clickable events. When passed an href, the button is rendered as an anchor tag to leverage the browser's existing link behavior.

Learn more about why we choose anchor over button for links in this post by Marcy Sutton.

The <Button> component is bare without passing any prop. You can either set a token with the is prop or style as you intend with tailwind classes. Please note, our design has zero hover effects if the Button is disabled, the mouse should remain as cursor-default instead of cursor-not-allowed, etc.

Tokens:

Size options:

With icon:

Icon only:

Disabled state: