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

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

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.

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>

API Reference

PropTypeDefaultRequired
theme
"primary" | "secondary" | "success" | "danger" | "warning" | "neutral"

-

-

appearance
"outline" | "solid"

-

-

size
"sm" | "md" | "lg"

-

-

isLoading
boolean

-

-

fullWidth
boolean

-

-

asJSX.IntrinsicElements

-

-

cssCSSProperties

-

-