@react-spectre/button

React components for Spectre.css's buttons.

Installation

yarn add @react-spectre/button

npm install @react-spectre/button --save

Usage

Buttons

There is 1 single component used for buttons: Button.

import { Button } from '@react-spectre/button'

Buttons can have 3 different base styles: default, primary and link. The two latter can be specifed using props with the same name:

<Button>Default</Button>
<Button primary>Primary</Button>
<Button link>Link</Button>

Colors

Buttons can be colored using: success or error props:

<Button success>Success</Button>
<Button error>Error</Button>

Sizes

Buttons can have two sizes using: small or large props:

<Button small>Small</Button>
<Button large>Large</Button>

Buttons can have fixed sizes using: action or circle props:

<Button action>Action</Button>
<Button circle>Circle</Button>

States

Buttons can have 3 different states using: active, disabled or loading:

<Button active>Active</Button>
<Button disabled>Disabled</Button>
<Button loading>Loading</Button>

Groups

Two or more buttons can be group when nested inside a Group or Button.Group:

<Button.Group>
  <Button>First</Button>
  <Button>Second</Button>
  <Button>Third</Button>
</Button.Group>

Made with ❤️ by Rubens Mariuzzo.

MIT License