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

73 lines
1.3 KiB
Markdown
Raw Normal View History

```jsx
const React = require('react');
const { default: Button } = require('./');
<span>
<Button>Inspire the lazy</Button>
<span> </span>
2017-10-12 21:15:51 +03:00
<Button href="#1">Inspire the lazy (anchor)</Button>
</span>;
```
#### Button > Secondary
```jsx
const React = require('react');
const { default: Button } = require('./');
<span>
<Button secondary>Inspire the brave</Button>
<span> </span>
2017-10-12 21:15:51 +03:00
<Button href="#2" secondary>
Inspire the brave (anchor)
</Button>
</span>;
```
#### Button > Tertiary
```jsx
const React = require('react');
const { default: Button } = require('./');
<span>
<Button tertiary>Inspire the tertiary</Button>
<span> </span>
2017-10-12 21:15:51 +03:00
<Button href="#3" tertiary>
Inspire the tertiary (anchor)
</Button>
2017-09-08 15:01:37 +03:00
<span> </span>
2017-10-12 21:15:51 +03:00
<Button tertiary selected>
Inspire the tertiary
</Button>
</span>;
```
#### Button > Disabled
```jsx
const React = require('react');
const { default: Button } = require('./');
<span>
<Button disabled>Inspire the liars</Button>
<span> </span>
2017-10-12 21:15:51 +03:00
<Button href="#4" disabled>
Inspire the liars (anchor)
</Button>
</span>;
```
#### Button > Loading
```jsx
const React = require('react');
const { default: Button } = require('./');
<span>
<Button secondary loading>
Inspire the liars
</Button>
</span>;
```