Button

It adds default styling and the css prop. By default primary theme is displayed with a solid appearance.

<Button>Hello world</Button>
<Button>Hello world</Button>
Edit me!

Themes

These are the available themes for the Button component: primary (default), secondary, success, warning, danger, and neutral.

<>
  <Button>Primary</Button>
  <Button theme="secondary">Secondary</Button>
  <Button theme="success">Success</Button>
  <Button theme="warning">Warning</Button>
  <Button theme="danger">Danger</Button>
  <Button theme="neutral">Neutral</Button>
</>

Appearance

There are two options for the appearance property: solid and outline. There are the available outline variations for the primary, secondary and neutral themes.

<Button appearance="outline">Primary</Button>

Disabled state

Each variation has an disabled stated, by setting the disabled property.

<>
  <Button disabled>Disabled button</Button>
  <Button theme="success" disabled>
    Disabled button
  </Button>
</>

Loading state

When using a button to request data or fire an action that has a potential delay, including a loading state to the button can be a useful indicator that stuff is happening. The isLoading prop must be a boolean value to activate the loading state.

<Button isLoading> Hello world</Button>
<Button isLoading> Hello world</Button>
Edit me!

Polymorphism

The Button component supports polymorphism, therefore depending on whether it receives an onClick/href as a prop, it will produce a button or link respectively

<Button href="http://example.com/">I'm a link</Button>

<Button onClick={() => console.log('clicked')}>I'm a button</Button>