button

type
Not required
("button" | "submit" | "reset")
className
Not required
string
children
Not required
node
is
Not required
("primary" | "primary-blue" | "secondary" | "tertiary" | "plain")
color
Not required
("red" | "white" | "plain")
Temporary fallback for "is" prop
disabled
Not required
bool
false
size
Not required
("sm" | "md" | "lg")
"md"
icon
Not required
elementType
href
Not required
string
active
Not required
bool
Used to manage active state in button group
onMouseDown
Not required
func
() => {}
onBlur
Not required
func
() => {}
onClick
Not required
func
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: