Components

Chip

An outlined pill with an icon, for listing capabilities. In src/components/chip.tsx.

Global inboxSchedulingGoogle reviews
<Chip icon="inbox-01">Global inbox</Chip>
<Chip icon="google" multicolor>Google reviews</Chip>

Props

icon        File name in /public/icons (".svg" assumed), drawn in the text colour
multicolor  Keep the icon's own colours, for brand logos

Guidelines

  • Do:Use in a wrapping row (flex flex-wrap gap-2) to show what something includes.
  • Don't:Don't use for status (that's Badge) or actions (that's Button).