1. Components
  2. Button

Button

A widget that enables users to trigger an action or event.

Size

Variant

The last variant solid is a special variant that only implements a subset of the intents (and vice versa: the relevant intents may not implement styles for every variant).

Intent

Disabled

Icons

Sizes with icons

Icon button

To use icon-only buttons, use IconButton. It is identical to Button, except it does not have the text variant.

To have the button act as a link, pass in a URL to the href prop. To open the link in a new tab, use the newTab prop. Note that the final component will be rendered as a <a> element, so browser features like right-clicking to open in a new tab will work.

HomeNew tab
1
<DesignComponentsDisplay className="grid-flow-col grid-rows-1">
2
  <Button href="/" rightIcon={<Unknown />}>
3
    Home
4
  </Button>
5
  <Button href="/" rightIcon={<Unknown />} newTab={true}>
6
    New tab
7
  </Button>
8
</DesignComponentsDisplay>

Button group

To group relevant buttons/actions together, use ButtonGroup.

BadgeCheckbox