Chip
Compact interactive label for filters, tags, and selections. Three behavioural modes: input (removable), filter (toggle), and assist (action).
Filter Chips
Toggle on/off to refine a list. Use aria-pressed for accessibility.
Active:
Input Chips
Common in tag editors, recipient fields, and multi-select inputs.
No tags — type below to add some
Assist Chips
Trigger a single action — add to cart, share, bookmark. Not toggleable.
With Avatar
Represent assignees, collaborators, or tagged contacts.
Sizes
Three sizes: sm, default (md), lg.
Small
Medium
Large
Semantic Variants
Status-aware chips for order states, labels, and alerts.
Default
Delivered
Pending
Cancelled
Shipping
States
Removable
Disabled input
Real-world: Product Filter Panel
Combined active filters strip with clear-all — common in e-commerce category pages.
Active filters:
No active filters