Skip to main content

Actions and status

Button

Render the primary shared action control for the highest-priority calls to action. The absolute workhorse of any UI.

Curated demo

Interactive playground

Controls

Reference

Render the primary shared action control for the highest-priority calls to action. The absolute workhorse of any UI.

  • Use Button for actions, not navigation. If clicking it changes the URL, you probably want a LinkButton.
  • Switch to LinkButton when the target is another route.
  • Use selected when a button represents the active pressed state. It's like leaving the button squished down.
  • Don't make everything a primary button. If everything screams for attention, the user just gets a headache.

Props

Name Type Default Description
variant 'primary' | 'secondary' | 'danger' 'primary' The visual style of the button.
size 'sm' | 'md' | 'lg' 'md' The size of the button.
disabled boolean false Whether the button is disabled.
selected boolean false Whether the button is in a selected/pressed state.
class string — Additional CSS classes.

Example snippet

<Button variant="primary" selected>Ship it</Button>