Skip to content
Edit this page

Button

Buttons allow users to take actions, and make choices, with a single tap.

Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:

  • Modal windows
  • Forms
  • Cards
  • Toolbars

Variants

The Button comes with four global variants: solid (default), soft, outlined and plain.

<Button variant="solid">Solid</Button>
<Button variant="soft">Soft</Button>
<Button variant="outlined">Outlined</Button>
<Button variant="plain">Plain</Button>

Colors

All theme palettes are available via the color prop which can be combined with the variant prop.

Variant:

Sizes

The Button has three sizes: sm, md (default) and lg.

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

Disabled

Specify disabled prop to the button to disable the interaction and focus.

<Button disabled variant="solid">
  Solid
</Button>
<Button disabled variant="soft">
  Soft
</Button>
<Button disabled variant="outlined">
  Outlined
</Button>
<Button disabled variant="plain">
  Plain
</Button>

With icons

Use startIcon and/or endIcon props to control the position of the specified icon.

<Button startIcon={<Add />}>Add to cart</Button>
<Button
  aria-label="Like"
  variant="soft"
  color="neutral"
  endIcon={<KeyboardArrowDown fontSize="lg" />}
>
  <ThumbUp />
</Button>
<Button variant="outlined" endIcon={<KeyboardArrowRight />} color="success">
  Checkout
</Button>

Icon button

If you want an equal width and height button without displaying the label, use IconButton. It accepts the same values for variant, color, and size props.

<IconButton variant="solid">
  <FavoriteBorder />
</IconButton>
<IconButton variant="soft">
  <FavoriteBorder />
</IconButton>
<IconButton variant="outlined">
  <FavoriteBorder />
</IconButton>
<IconButton variant="plain">
  <FavoriteBorder />
</IconButton>

Use component="a" prop to change the html element from button to a.

Open in new tab
<Button component="a" href="#as-link" startIcon={<OpenInNew />}>
  Open in new tab
</Button>
<IconButton aria-label="Open in new tab" component="a" href="#as-link">
  <OpenInNew />
</IconButton>

Unstyled

The component also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.