---
name: Dot
menu: Components
route: /components/dot
---

import { Playground, PropsTable } from 'docz'
import { Table, Dot } from '@personio/ui-components'
import './dot.scss'

# Dot

<PropsTable of={Dot} />

## Examples

<Playground>
  <div className="dots-container">
    <Dot theme="default" />
    <Dot theme="primary" />
    <Dot theme="success" />
    <Dot theme="info" />
    <Dot theme="warning" />
    <Dot theme="warning-light" />
    <Dot theme="danger" />
    <Dot theme="dark" />
    <Dot theme="light" />
  </div>
</Playground>

## Integrating with other elements

<Playground>
  <div className="dot-table-container">
    <Table>
      <Table.Head>
        <Table.Row>
          <Table.Cell colSpan={5}>
            <Dot theme="warning" />
            <span>1 Change(s) in Recurring Compensation</span>
          </Table.Cell>
        </Table.Row>
        <Table.Row theme="default">
          <Table.Cell>Attribute</Table.Cell>
          <Table.Cell>Old value</Table.Cell>
          <Table.Cell>New value</Table.Cell>
          <Table.Cell>Valid from</Table.Cell>
          <Table.Cell>Edited on</Table.Cell>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row>
          <Table.Cell>Supervisor</Table.Cell>
          <Table.Cell>John Lorem</Table.Cell>
          <Table.Cell theme="warning">Foo dolor</Table.Cell>
          <Table.Cell>01.06.2018</Table.Cell>
          <Table.Cell>01.05.2018</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  </div>
</Playground>