joyent-portal/packages/ui-toolkit/src/footer/sticky.md

45 lines
1.1 KiB
Markdown
Raw Normal View History

#### 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>;
```