Button

Unversal button component that can be used in various different scenarios.

Installation

Install the component from your command line.

yarn add @f8n/components/button

Anatomy

Import all parts and piece them together.

<Button variant="primary" onClick={() => null}>
  Click me
</Button>

API reference

Prop	Type	Description	Default
`icon`	`boolean`, or `standalone`	—	`false`
`size`	`0`, `1` or `2`	—	`1`
`variant`	`blur`,`danger`,`ghost`,`outline`,`primary`, or `raised`	—	`outline`

Variants

There are a few standard variants that can be used depending on context. Some work better on white backgrounds and other work better on images.

ghost

primary

outline

raised

<Button variant="ghost" onClick={() => null}>
  Click me
</Button>
<Button variant="primary" onClick={() => null}>
  Click me
</Button>
<Button variant="outline" onClick={() => null}>
  Click me
</Button>
<Button variant="raised" onClick={() => null}>
  Click me
</Button>

We also have a special variant called blur meant to be used on image backgrounds.

Reaction 1 by @mikeyjoyce

<Button variant="blur" onClick={() => null}>
  Click me
</Button>

Sizes

These sizes are standardized across form components.

<Button size={2}>
  Click me
</Button>
<Button size={1}>
  Click me
</Button>
<Button size={0}>
  Click me
</Button>

With icons

The icon can either be used on its own, or alongside some text. Note: Don't forget to wrap the text in a span to properly space it from the icon.

<Button icon={standalone}>
  <ArrowLeftIcon />
</Button>
<Button icon>
  <ArrowLeftIcon />
  <span>Click me</span>
</Button>