Pill

Small labels that help qualify information.

Pill variations

Default

<Pill>
  Available
</Pill>

Icon & color

<Pill
  color="red"
  icon={<ContentModifierTrophyTiny />}
>
  In high demand
</Pill>

Multiple

<div>
  <span className="mr2">
    <Pill color="blue">
      Highly rated
    </Pill>
  </span>
  <span>
    <Pill
      color="green"
      icon={<ContentModifierLightningTiny />}
    >
      Fast response
    </Pill>
  </span>
</div>

Props

Pill

children
required
Text content to render.

Type
string
icon
"Tiny" size icon to render.

Type
React.ReactNode
color
Color of the pill text and background.

Type
'green' | 'red' | 'indigo' | 'blue' | 'yellow' | 'purple'