Chip
Last Updated: September 2026Chips represent interactive filters or tokens that can include icons, dropdowns, or remove actions.
Source CodeAnatomy
link- 1Icon
- 2Label
- 3Remove
Variants
linkNeutral
Default variant with background fill.
Accent
Higher emphasis for selected or primary filters.
With icon
Leading icon for quicker scanning.
Removable
Shows a remove control for dismissible filters.
Dropdown
Trailing caret for chips that open a menu.
Sizes
linkChips support 2 sizes: S and M.
Usage Guidelines
linkWhen to use
- •To represent a selected filter, attribute, or token the user can act on.
- •When removable or dropdown chips help refine a search or filter bar.
- •For compact labeled selections alongside inputs.
When not to use
- •For static status labels — use Tag.
- •For primary actions — use Button.
- •For navigation destinations — use Link or Navigation.
Keep labels short and parallel in a filter bar.
Don't put full sentences or help text in the label.
Wire onRemove when removable so the close control does something.
Don't use Tag for interactive filters — Tag is informational.
Behaviors
linkVisual variants
- •variant: neutral (default) or accent.
- •size: sm (default) or md.
- •background={false} keeps the chip transparent until hover/press.
Affordances
- •icon — leading Material Symbol.
- •dropdown — trailing arrow_drop_down for menu triggers.
- •removable + onRemove — trailing close button (stopPropagation on click).
Disabled
- •disabled sets aria-disabled and blocks pointer events.
- •Remove button is also disabled when the chip is disabled.
Content Guidelines
linkLabels
- •Use nouns or short filters users already understand (“Open”, “Assigned to me”).
- •Avoid truncation-prone labels in dense chip groups.
Chip vs Tag
- •Chip is interactive (cursor, hover, optional remove/dropdown).
- •Tag is for read-only status — pick Tag when there is no action.
Accessibility
linkText & Labels
- •label is required and is the visible name of the chip.
- •Remove control uses aria-label={`Remove ${label}`} automatically.
ARIA attributes
- •Root is a span; aria-disabled is set when disabled.
- •Removable chips expose a nested button for the close action.
Keyboard Support
- •Tab can reach the remove button when removable.
- •Activate remove with Enter / Space on the close button.
- •Whole-chip click handlers (if you add onClick) should not replace the remove button.
WCAG Compliance Standards
FAQs
linkCan Chip take children?
No. Pass label as a string. Optional icon, dropdown, and removable control the trailing/leading UI.
Chip vs Tag?
Chip for interactive filters/tokens; Tag for static status labels.
How do I clear a filter chip?
Set removable and handle onRemove — the close button stops propagation so parent click handlers stay separate.