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

109 lines
2.1 KiB
Markdown
Raw Normal View History

#### Primary Button
2017-12-15 16:53:59 +02:00
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>
2017-10-12 21:15:51 +03:00
</span>;
// Tab: Disabled
const React = require('react');
const { default: Button } = require('./');
<span>
<Button disabled>Inspire the brave</Button>
2017-10-12 21:15:51 +03:00
</span>;
```
#### Secondary Button
2017-12-15 16:53:59 +02:00
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>;
2017-12-15 16:53:59 +02:00
// Tab: Disabled
const React = require('react');
const { default: Button } = require('./');
<span>
<Button secondary disabled>
2017-12-15 16:53:59 +02:00
Inspire the brave
</Button>
2017-10-12 21:15:51 +03:00
</span>;
```
#### Loading Button
```jsx
const React = require('react');
const { default: Button } = require('./');
<span>
<Button secondary loading>
Inspire the liars
2017-10-12 21:15:51 +03:00
</Button>
</span>;
```
#### Quick Action
2017-12-15 16:53:59 +02:00
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>
2017-12-15 16:53:59 +02:00
</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;
2017-12-15 16:53:59 +02:00
<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>;
```