Anatomy

A chip consists of a container (A), a label (B), and an optional icon or state indicator (C) based on type or interaction.

Purpose

Chips let users make quick selections, filter content, or trigger contextual actions.

Types

Use the appropriate chip type based on selection behavior.

Always in sets

Chips should appear in groups — not standalone.

Short labels

Keep chip text concise and scannable.

Scrollable overflow

When chips exceed screen width, enable horizontal scroll.