Button

A button triggers an event or action. They let users know what will happen next.

Default

The default form of a button, used for most cases. They are not impactful enough to represent the primary action in a container.

import Button from '@/components/button';

<Button>Default button</Button>

Appearance

Primary

Use a primary button to call attention to an action on a form or to highlight the strongest call to action on a page. Primary buttons should only appear once per container (not including the application header or in a modal dialog). Not every screen requires a primary button.

import Button from '@/components/button';

<Button appearance="primary">Primary button</Button>

Subtle

Use a subtle button with a primary button for secondary actions, such as “Cancel".

import Button from '@/components/button';

<Button appearance="subtle">Subtle button</Button>

Neutral

The neutral button is the button in the theme's reverse view. Use when a status is not stated and needs attention.

import Button from '@/components/button';

<Button appearance="neutral">Neutral button</Button>

Status

Status buttons appear as a final confirmation for a specific action, such as danger, help, info, success and warning. These are mostly found in confirmation modes.

Filled

import Button, { ButtonGroup } from '@/components/button';

<ButtonGroup>
  <Button appearance="danger">Danger button</Button>
  <Button appearance="help">Help button</Button>
  <Button appearance="info">Info button</Button>
  <Button appearance="success">Success button</Button>
  <Button appearance="warning">Warning button</Button>
</ButtonGroup>

Outlined

import Button, { ButtonGroup } from '@/components/button';

<ButtonGroup>
  <Button appearance="danger" isOutline>Danger button</Button>
  <Button appearance="help" isOutline>Help button</Button>
  <Button appearance="info" isOutline>Info button</Button>
  <Button appearance="success" isOutline>Success button</Button>
  <Button appearance="warning" isOutline>Warning button</Button>
</ButtonGroup>

State

Disabled

Set isDisabled to disable a button when another action has to be completed before the button is usable, such as changing a text field value or waiting for a system response.

import Button from '@/components/button';

<Button isDisabled>Disabled button</Button>

Loading

Set isLoading to indicate the button is loading. The button text is hidden and a spinner is shown in its place, while maintaining the width that it would have if the text were visible.

import Button from '@/components/button';

<Button isLoading>Loading button</Button>

Spacing

Buttons can have various spacing. Default spacing is used for most use cases, compact for tables and none for breadcrumbs.

import Button, { ButtonGroup } from '@/components/button';

<ButtonGroup>
  <Button appearance="danger">Danger button</Button>
  <Button appearance="help">Help button</Button>
  <Button appearance="info">Info button</Button>
  <Button appearance="success">Success button</Button>
  <Button appearance="warning">Warning button</Button>
</ButtonGroup>

Button with icon

Buttons may include an icon before or after the text.

import Button, { ButtonGroup } from '@/components/button';

<ButtonGroup>
  <Button iconBefore={<Icon name="icon-home" />} />
  <Button iconBefore={<Icon name="icon-youtube" />}>Icon Before</Button>
  <Button iconAfter={<Icon name="icon-twitter" />}>Icon After</Button>
</ButtonGroup>

Button Group

Default

A button group displays multiple buttons together.

import Button from '@/components/button';

<ButtonGroup>
  <Button>First button</Button>
  <Button>Second button</Button>
  <Button>Third button</Button>
</ButtonGroup>

Appearance

The appearance to apply to all buttons.

import Button from '@/components/button';

<ButtonGroup appearance="primary">
  <Button>First button</Button>
  <Button>Second button</Button>
  <Button>Third button</Button>
</ButtonGroup>

Button Menu

A button menu displays buttons as dropdown menu.

import Button, { ButtonMenu } from '@/components/button';

  <ButtonMenu
    placeholder="Open Button Menu"
    iconAfter={<Icon name="icon-chevron-down" />}
    buttons={[
      {
        children: "Menu Item 1",
        disabled: true
      },
      {
        children: "Menu Item 2"
      },
      {
        children: "Menu Item 3"
      }
    ]}
  />