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>

16

<Avatar src={images.logo} />
<Badge variant='circle' ml={-3} mt={-3}>16</Badge>
<Avatar src={images.logo} />
<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',
    },
  },
}