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

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