Badge

import { Badge } from 'theme-ui'

<Badge>Badge</Badge>
<Badge>Badge</Badge>

<Heading>
  Components
  <Badge variant="accent">New</Badge>
  <Badge variant="outline" ml={1}>
    Cool
  </Badge>
</Heading>
<Heading>
  Components
  <Badge variant="accent">New</Badge>
  <Badge variant="outline" ml={1}>
    Cool
  </Badge>
</Heading>

<Avatar src={images.logo} sx={{ backgroundColor: 'white' }} />
<Badge variant='circle' ml={-3} mt={-3}>16</Badge>
<Avatar src={images.logo} sx={{ backgroundColor: 'white' }} />
<Badge variant='circle' ml={-3} mt={-3}>16</Badge>

Variants

Badge variants can be defined in theme.badges. The Badge component uses theme.badges.primary as its default variant.

// example theme variants
{
  badges: {
    primary: {
      color: 'background',
      bg: 'primary',
    },
    outline: {
      color: 'primary',
      bg: 'transparent',
      boxShadow: 'inset 0 0 0 1px',
    },
  },
}