Pill

The pill component is a non-interactive element used to display metadata, status indicators, or tags. It helps contextualize various states or options within larger components.

Filled Outlined Soft

<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.

Accessory

<span class="pill-filled">Accessory</span>

Outlined

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

Available

<span class="pill-outlined">Available</span>

Soft

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

New

<span class="pill-soft">New</span>

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

Usage Guidelines

• Keep it short: Pills should contain concise text—typically 1-2 words
• Non-interactive: Pills are display-only. Use buttons or chips for interactive elements
• Consistent styling: Use the same variant for similar types of information within a context

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