56 lines
1.2 KiB
Markdown
56 lines
1.2 KiB
Markdown
|
#### 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');
|
||
|
|
const { StickyFooter, StartIcon, Button, StopIcon, ResetIcon, DeleteIcon } = require('../');
|
||
|
|
const { Row, Col } = require('joyent-react-styled-flexboxgrid');
|
||
|
|
|
||
|
|
<div style={{position: 'relative', height: 100}}>
|
||
|
|
<StickyFooter bottom>
|
||
|
|
<Row between="xs" middle="xs">
|
||
|
|
<Col xs={7}>
|
||
|
|
<Button
|
||
|
|
type="button"
|
||
|
|
secondary
|
||
|
|
icon
|
||
|
|
>
|
||
|
|
<StartIcon />
|
||
|
|
<span>Start</span>
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
type="button"
|
||
|
|
secondary
|
||
|
|
icon
|
||
|
|
>
|
||
|
|
<StopIcon />
|
||
|
|
<span>Stop</span>
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
type="button"
|
||
|
|
secondary
|
||
|
|
icon
|
||
|
|
>
|
||
|
|
<ResetIcon />
|
||
|
|
<span>Reboot</span>
|
||
|
|
</Button>
|
||
|
|
</Col>
|
||
|
|
<Col xs={5}>
|
||
|
|
<Button
|
||
|
|
type="button"
|
||
|
|
error
|
||
|
|
secondary
|
||
|
|
right
|
||
|
|
icon
|
||
|
|
>
|
||
|
|
<DeleteIcon fill="#D2433A"/>
|
||
|
|
<span>Remove</span>
|
||
|
|
</Button>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
</StickyFooter>
|
||
|
|
</div>
|
||
|
|
```
|