Chips

Overview

Chips are compact label elements used to display status, categorize content, or represent filters and attributes. They are visually similar to badges but are larger, more prominent, and may be interactive.

Unlike badges, chips can function as links when rendered using an anchor tag, providing hover and focus states. Chips should be used intentionally and sparingly, as they carry more visual weight than badges.

Guidelines

Dos

• Use chips to display status, categories, or lightweight attributes.
• Use chips when the label needs more visual emphasis than a badge.
• Use interactive chips (<a>) for navigational or filter-like behavior.
• Group multiple chips using a chip-container to ensure consistent spacing and alignment.
• Keep chip text short and scannable (one or two words).

Don’ts

• Don’t use chips for primary actions or workflows.
• Don’t use chips interchangeably with buttons.
• Don’t overload interfaces with large numbers of chips.
• Don’t use chips when a badge or plain text would be sufficient.
• Don’t introduce custom chip colors outside approved variants.

Variants

Variant	Description	Example Use
Default	Neutral chip for general labeling	Metadata, labels
Primary	Brand-emphasized chip	Highlighted category
Success	Positive or completed status	Active, Enabled
Danger	Error or blocked status	Error, Disabled
Info	Informational or descriptive status	Info, Details
Warning	Cautionary or pending status	Pending, Needs Review

Modifiers

Chip container

When displaying multiple chips together, wrap them in a chip-container.

• Ensures consistent spacing and alignment.
• Prevents wrapping and layout issues.
• Required when multiple chips appear inline.

Chips