Button

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

Size

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.

Link

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.

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>;