joyent-portal/packages/ui-toolkit/src/button

Primary Button

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

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

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

Secondary Button

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

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

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

Disabled Button

Disabled buttons can be used freely to indicate that no action is permitted in this button. Min. width: 120px

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

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

Small Button

Small buttons are supporters of the secondary button. They can be used within cluttered or complex patterns to free up space.

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

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

Loading Button

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.

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

Primary

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

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

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

Reversed

Reversed anchors is used on dark backgrounds, where a default anchor would not provide enough contrast.

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

<span
  style={{
    'background-color': '#3B46CC',
    height: 80,
    width: 250,
    display: 'flex',
    'align-items': 'center',
    'justify-content': 'center'
  }}
>
  <Anchor href="https://joyent.com" reversed>
    Inspire the lazy secondary
  </Anchor>
</span>;

In-paragraph anchor

In-paragraph anchor is a link that sits inside a text components. The default state does not have an underline. The underline appears on hover and click.

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

<p>
  Body text. Crack that whip. Give the past a slip. Step on a crack. Break your
  momma's back. When a problem comes along.You must whip it.
  <Anchor href="#">Learn More</Anchor>
</p>;

Disabled

Disabled anchors cannot be actioned and the cursor is disabled.

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

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