Pill

Pills are non-interactive metadata, status, or tag labels; they do not replace links or buttons.

Filled Outlined Soft

Show codeHide code

<div class="flex gap-8">
  <span class="pill-filled">Filled</span>
  <span class="pill-outlined">Outlined</span>
  <span class="pill-soft">Soft</span>
</div>

Variants

Filled

The filled variant provides strong contrast, making it ideal for active states or important signifiers.

Outlined

The outlined variant has less visual weight, suitable for passive information or secondary indicators.

Soft

The soft variant uses a subtle background, perfect for metadata or tags that aren’t crucial to understanding the current context.

CSS Classes

Class	Description
pill-filled	Neutral surface background with inverted text color
pill-outlined	Border-based styling with primary ornament color
pill-soft	Secondary background for subtle appearance

Accessibility

• Ensure sufficient color contrast between the pill text and background
• Screen readers will read the pill content as plain text
• Do not rely on pill color alone to convey meaning. Include descriptive text
• Keep navigation and actions independent from the pill; the pill communicates information and is not interactive