joyent-portal/packages/ui-toolkit/src/button
Sérgio Ramos 6f36e62f92 chore: update snapshots
# Conflicts:
#	packages/my-joy-beta/src/components/__tests__/__image_snapshots__/key-value-ui-js-key-value-submitting-1-snap.png
#	packages/my-joy-beta/src/components/__tests__/__snapshots__/key-value.spec.js.snap
#	packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-images-name-stuff-image-name-stuff-1-snap.png
#	packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-item-mutating-1-snap.png
#	packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-1-snap.png
#	packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-instance-1-snap.png
#	packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-instance-2-snap.png
#	packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-1-snap.png
#	packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-state-provisioning-1-snap.png
#	packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-state-running-1-snap.png
#	packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-state-stopped-1-snap.png
#	packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
#	packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
#	packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap
#	packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/user-script.spec.js.snap
#	packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/cns-ui-js-cns-loading-1-snap.png
#	packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/firewall-ui-js-firewall-loading-1-snap.png
#	packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-loading-1-snap.png
#	packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/metadata-ui-js-metadata-metadata-1-snap.png
#	packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/networks-ui-js-networks-loading-1-snap.png
#	packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-loading-1-snap.png
#	packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-1-snap.png
#	packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-2-snap.png
#	packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-3-snap.png
#	packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/tags-ui-js-tags-editing-removing-1-snap.png
#	packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
#	packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
2018-02-22 01:22:27 +00:00
..
__tests___ chore: update snapshots 2018-02-22 01:22:27 +00:00
index.js feat: create instance from image, and vice-versa 2018-02-16 19:12:50 +00:00
Readme.md docs(ui-toolkit): updated buttons docs 2018-01-03 14:46:20 +00:00

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>;