---
name: Badge
---

import {Playground, PropsTable} from 'docz'
import {css} from '@emotion/core'

import Badge from '.'
import Base from '../Base'

# Badge

<Playground>
  <Badge>1</Badge>
  <Base/>
  <Badge.Container css={css(`margin-top: 20px;`)}>
    <Base
      css={css(`
        height: 30px;
        width: 30px;
        color: white;
        background-color: lightgrey;
        padding: 10px;
      `)}
    />
    <Badge>9999</Badge>
  </Badge.Container>
  <Base/>
  <Badge.Container css={css(`margin-top: 20px;`)}>
    <Base
      css={css(`
        height: 30px;
        width: 30px;
        color: white;
        background-color: lightgrey;
        padding: 10px;
      `)}
    />
    <Badge></Badge>
  </Badge.Container>
</Playground>

<PropsTable of={Badge}/>
