1.1 KiB
1.1 KiB
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.
// 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>;