Chips & Tags

Compact labels for filters, people, status, input values and selected options.

Basic chips

Use compact rounded labels for simple categories and context.

NeutralPrimarySuccessWarningDanger

Removable tags

Let users remove selected values without reopening a full filter menu.

Input tags

Turn text input into tokenized values for labels, recipients and attributes.

DesignFrontendPriority

Press Enter to add a tag.

Filter chips

Use toggleable chips for multi-select filtering without a large control bar.

Active filter active

Status chips

Pair a surface, icon or dot with a concise operational state.

OperationalDegradedOutageDeploying

Avatar chips

Include people or teams without losing the compact tag footprint.

Sophia CarterSophia CarterDaniel LeeDaniel LeeEmma WilsonEmma Wilson

Icon chips

Use an icon to improve recognition for common types and locations.

Counts and overflow

Use count chips to summarize selections and collapse long tag sets.

Design6Comments24+8 more