joyent-portal/packages/ui-toolkit/src/button/Readme.md

#### Primary Button

Primary button to be used once per page. Only use to indicate main action per pattern.
Min. width: 120px

```jsx
// Name: Active
const React = require('react');
const { default: Button } = require('./');

<span>
  <Button>Inspire the lazy</Button>
</span>;

// Tab: Disabled
const React = require('react');
const { default: Button } = require('./');
<span>
  <Button disabled>Inspire the brave</Button>
</span>;
```

#### Secondary Button

Secondary buttons can be used freely to indicate other actions on patterns.
Min. width: 120px

```jsx
// Name: Active
const React = require('react');
const { default: Button } = require('./');

<span>
  <Button secondary>Inspire the brave</Button>
</span>;

// Tab: Disabled
const React = require('react');
const { default: Button } = require('./');
<span>
  <Button secondary disabled>
    Inspire the brave
  </Button>
</span>;
```

#### Loading Button

```jsx
const React = require('react');
const { default: Button } = require('./');

<span>
  <Button secondary loading>
    Inspire the liars
  </Button>
</span>;
```

#### Quick Action

Quick action buttons can be embedded in components to give additional functionality. They can be used in either primary or secondary color palettes, depending on importance.

```jsx
// Name: Active
const React = require('react');
const { default: Button } = require('./');
const { Actions } = require('../icons');
<span>
  <Button secondary icon actions>
    <Actions />
  </Button>
</span>;

// Tab: Disabled
const React = require('react');
const { default: Button } = require('./');
const { Actions } = require('../icons');
<span>
  <Button secondary icon actions disabled>
    <Actions />
  </Button>
</span>;
```

#### Primary

Primary anchor is a type of a link that sits outside the body text.

```jsx
const React = require('react');
const Anchor = require('../text').Anchor;

<Anchor href="https://joyent.com">Inspire the lazy</Anchor>;
```

#### Disabled

Disabled anchors cannot be actioned and the cursor is disabled.

```jsx
const React = require('react');
const Anchor = require('../text').Anchor;

<Anchor disabled href="https://joyent.com">
  Inspire the lazy disabled
</Anchor>;
```