Components

Tags, badges & avatars

Tags and chips are the only place pills are used. Status badges carry the four status colours. Avatars fall back to initials, then a neutral placeholder.

Tags, badges & avatars
AutomationFeatured
LiveDraftOverdueQueued
PNTRSO
<Tag>Automation</Tag>
<Tag tone="brand">Featured</Tag>

<Badge tone="success">Live</Badge>
<Badge tone="warning">Draft</Badge>
<Badge tone="danger">Overdue</Badge>
<Badge tone="info">Queued</Badge>

<Avatar name="Priya Nair" />
<Avatar /> {/* empty falls back to a neutral placeholder */}

Guidelines

Do
  • Use pills for tags and small chips only.
  • Use the status tokens for badges so meaning stays consistent.
  • Fall back to initials, then a neutral icon placeholder, for avatars.
Do not
  • Do not use a pill shape for buttons or inputs.
  • Do not invent new badge colours outside the four status roles.