Skip to main content

Button

Examples

Button

Rendered as a <button> by default.

Code
<Button>
  A button
</Button>

Secondary Button

A button but with secondary styling.

Code
<Button variant="textSecondary">
  A button
</Button>

Tertiary Button

A button but with tertiary styling.

Code
<Button variant="textTertiary">
  A button
</Button>

Disabled Button

Code
<Button disabled>
  A button
</Button>

onClick Handler

Code
<Button onClick={function noRefCheck() {}}>
  Button with onClick
</Button>

As Anchor

An <a> is rendered if a href is specified.

Code
<Button href="/">
  Button as anchor
</Button>

Block

The button will take up all available space if block is passed as true.

Code
<Button block>
  Block button
</Button>

With Icon

Code
<Button icon={<ChatIcon />}>
  Chat
</Button>

With Icon at End

Show an icon at the end after the button contents

Code
<Button
  icon={<ChatIcon />}
  iconPosition="end"
>
  Chat
</Button>

Icon Only

Only show an icon, only use when the icon is very clear by itself and always combine with a label for assistive devices.

Code
<Button
  icon={<ChatIcon />}
  variant="icon"
>
  Chat
</Button>

Loading

The button will take up all available space in place of the content if loading is passed as true and disables interaction.

Code
<Flex gap="4px">
  <Button
    onClick={function noRefCheck() {}}
  >
    Click me to load something!
  </Button>
  <Button onClick={function noRefCheck() {}}>
    Reset
  </Button>
</Flex>

Props

block

boolean

If set to `false` component renders with `width : auto`, otherwise `width : full`.

loading

boolean

If set to `true`, disables the button and shows a `Spinner` component in place of the child content.

variant

"icon" | "text" | "textSecondary" | "textTertiary"

Default: "text"

icon

ReactNode

iconPosition

"end" | "start"

Default: "start"