2018-04-05 16:29:22 +03:00
|
|
|
### Icon Button
|
2018-03-01 15:40:36 +02:00
|
|
|
|
|
|
|
Icon buttons are to be used to illustrate important actions and for when we are redirecting users to seperate services such as Github.
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
// Name: Example
|
|
|
|
const React = require('react');
|
|
|
|
const { default: Button } = require('./');
|
|
|
|
const { StartIcon } = require('../');
|
|
|
|
|
2018-03-21 18:19:17 +02:00
|
|
|
<Button type="button" secondary bold icon>
|
|
|
|
<StartIcon />
|
|
|
|
<span>Start</span>
|
|
|
|
</Button>;
|
2018-03-01 15:40:36 +02:00
|
|
|
```
|
|
|
|
|
2018-04-05 16:29:22 +03:00
|
|
|
### Delete Button
|
2018-03-01 15:40:36 +02:00
|
|
|
|
|
|
|
The delete button is basically an icon button, however it is coloured red to display the destructive nature of the action.
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
// Name: Active
|
|
|
|
const React = require('react');
|
|
|
|
const { default: Button } = require('./');
|
|
|
|
const { DeleteIcon } = require('../');
|
|
|
|
|
2018-03-21 18:19:17 +02:00
|
|
|
<Button type="button" secondary bold icon error>
|
|
|
|
<DeleteIcon fill="rgb(210, 67, 58)" />
|
2018-03-01 15:40:36 +02:00
|
|
|
<span>Remove</span>
|
2018-03-21 18:19:17 +02:00
|
|
|
</Button>;
|
2018-03-01 15:40:36 +02:00
|
|
|
|
|
|
|
// Tab: Disabled
|
|
|
|
const React = require('react');
|
|
|
|
const { default: Button } = require('./');
|
|
|
|
const { DeleteIcon } = require('../');
|
|
|
|
|
2018-03-21 18:19:17 +02:00
|
|
|
<Button type="button" secondary disabled bold icon error>
|
2018-03-01 15:40:36 +02:00
|
|
|
<DeleteIcon />
|
|
|
|
<span>Remove</span>
|
2018-03-21 18:19:17 +02:00
|
|
|
</Button>;
|
2018-03-01 15:40:36 +02:00
|
|
|
```
|
|
|
|
|
2018-04-05 16:29:22 +03:00
|
|
|
### Dropdown Button
|
2018-03-23 19:46:42 +02:00
|
|
|
|
|
|
|
Dropdown Button is to be used when users have choices that are secondary to the one shown as the main action
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
// Name: Example
|
|
|
|
const React = require('react');
|
|
|
|
const { default: ButtonGroup } = require('./group');
|
|
|
|
const { default: PopoverButton } = require('./popover');
|
|
|
|
const { Item } = require('../popover');
|
|
|
|
const { default: Button } = require('./');
|
|
|
|
const { StartIcon } = require('../');
|
|
|
|
|
|
|
|
<ButtonGroup>
|
|
|
|
<Button secondary bold icon>
|
|
|
|
<StartIcon />
|
|
|
|
<span>Start</span>
|
|
|
|
</Button>
|
|
|
|
<PopoverButton secondary>
|
|
|
|
<Item>Hello</Item>
|
|
|
|
<Item>World</Item>
|
|
|
|
</PopoverButton>
|
|
|
|
</ButtonGroup>;
|
|
|
|
```
|
|
|
|
|
2018-04-05 16:29:22 +03:00
|
|
|
### Toggle Switch
|
2018-03-21 18:19:17 +02:00
|
|
|
|
2018-03-01 15:40:36 +02:00
|
|
|
Toggle switch is to be used when users have the choice to turn a service or feature on or off.
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
// Name: Active
|
|
|
|
const React = require('react');
|
|
|
|
const { default: FormGroup } = require('../form/group');
|
|
|
|
const { default: Toggle } = require('../form/toggle');
|
|
|
|
|
|
|
|
<FormGroup name="who-killed-1">
|
|
|
|
<Toggle value="video">Activate</Toggle>
|
2018-03-21 18:19:17 +02:00
|
|
|
</FormGroup>;
|
2018-03-01 15:40:36 +02:00
|
|
|
|
|
|
|
// Tab: Disabled
|
|
|
|
const React = require('react');
|
|
|
|
const { default: FormGroup } = require('../form/group');
|
|
|
|
const { default: Toggle } = require('../form/toggle');
|
|
|
|
|
|
|
|
<FormGroup name="who-killed-2" disabled>
|
|
|
|
<Toggle value="video" disabled>
|
|
|
|
Activate
|
|
|
|
</Toggle>
|
2018-03-21 18:19:17 +02:00
|
|
|
</FormGroup>;
|
2018-03-01 15:40:36 +02:00
|
|
|
```
|