2018-03-01 15:40:36 +02:00
|
|
|
#### Quick Action Toast
|
|
|
|
|
|
|
|
Quick Action Toasts are used to show contextually relevent commands and actions and should stick to the bottom of the page when they are active.
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
// Name: Active
|
|
|
|
const React = require('react');
|
2018-03-21 18:19:17 +02:00
|
|
|
const {
|
|
|
|
StickyFooter,
|
|
|
|
StartIcon,
|
|
|
|
Button,
|
|
|
|
StopIcon,
|
|
|
|
ResetIcon,
|
|
|
|
DeleteIcon
|
|
|
|
} = require('../');
|
2018-03-01 15:40:36 +02:00
|
|
|
const { Row, Col } = require('joyent-react-styled-flexboxgrid');
|
|
|
|
|
2018-03-21 18:19:17 +02:00
|
|
|
<div style={{ position: 'relative', height: 100 }}>
|
2018-03-01 15:40:36 +02:00
|
|
|
<StickyFooter bottom>
|
|
|
|
<Row between="xs" middle="xs">
|
|
|
|
<Col xs={7}>
|
2018-03-21 18:19:17 +02:00
|
|
|
<Button type="button" secondary icon>
|
2018-03-01 15:40:36 +02:00
|
|
|
<StartIcon />
|
|
|
|
<span>Start</span>
|
|
|
|
</Button>
|
2018-03-21 18:19:17 +02:00
|
|
|
<Button type="button" secondary icon>
|
2018-03-01 15:40:36 +02:00
|
|
|
<StopIcon />
|
|
|
|
<span>Stop</span>
|
|
|
|
</Button>
|
2018-03-21 18:19:17 +02:00
|
|
|
<Button type="button" secondary icon>
|
2018-03-01 15:40:36 +02:00
|
|
|
<ResetIcon />
|
|
|
|
<span>Reboot</span>
|
|
|
|
</Button>
|
|
|
|
</Col>
|
|
|
|
<Col xs={5}>
|
2018-03-21 18:19:17 +02:00
|
|
|
<Button type="button" error secondary right icon>
|
|
|
|
<DeleteIcon fill="#D2433A" />
|
2018-03-01 15:40:36 +02:00
|
|
|
<span>Remove</span>
|
|
|
|
</Button>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</StickyFooter>
|
2018-03-21 18:19:17 +02:00
|
|
|
</div>;
|
2018-03-01 15:40:36 +02:00
|
|
|
```
|