Button

The Button component is a light wrapper around an HTML button element

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

<Button>Hello world</Button>

Themes

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

<div className="flex gap-3 flex-wrap justify-center">
  <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>
</div>

Sizing

The Button component accepts four size variants: "sm" | "md" | "lg" | "xl"

<div className="flex gap-3 flex-wrap justify-center">
  <Button size="sm">Small</Button>
  <Button size="md">Medium</Button>
  <Button size="lg">Large</Button>
  <Button size="xl">XL</Button>
</div>

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.

<div className="flex flex-wrap gap-3 justify-center">
  <Button appearance="outline">Primary</Button>
  <Button appearance="outline" theme="secondary">Secondary</Button>
  <Button appearance="outline" theme="neutral">Neutral</Button>
</div>

Disabled state

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

<div className="flex flex-wrap gap-3 justify-center">
  <Button disabled>Primary</Button>
  <Button disabled theme="secondary">Secondary</Button>
  <Button disabled theme="success">Success</Button>
  <Button disabled theme="warning">Warning</Button>
  <Button disabled theme="danger">Danger</Button>
  <Button disabled theme="neutral">Neutral</Button>
  <Button disabled appearance="outline">Primary outline</Button>
  <Button disabled appearance="outline" theme="secondary">Secondary outline</Button></div>

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.

<div className="flex flex-wrap gap-3 justify-center">
  <Button isLoading>Primary</Button>
  <Button isLoading theme="secondary">Secondary</Button>
  <Button isLoading theme="success">Success</Button>
  <Button isLoading theme="warning">Warning</Button>
  <Button isLoading theme="danger">Danger</Button>
  <Button isLoading theme="neutral">Neutral</Button>
  <Button isLoading appearance="outline">Primary outline</Button>
  <Button isLoading appearance="outline" theme="secondary">Secondary outline</Button>
</div>

Full width

To stretch a button to the width of its container, use the `fullWidth` property.

<div className="flex flex-wrap gap-3 justify-center">
  <Button fullWidth>Primary</Button>
  <Button fullWidth theme="secondary">Secondary</Button>
  <Button fullWidth theme="success">Success</Button>
  <Button fullWidth theme="warning">Warning</Button>
  <Button fullWidth theme="danger">Danger</Button>
  <Button fullWidth theme="neutral">Neutral</Button>
  <Button fullWidth appearance="outline">Primary outline</Button>
  <Button fullWidth appearance="outline" theme="secondary">Secondary outline</Button>
</div>

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={() => alert('clicked')}>I'm a button</Button>