Skip to content

Chip

Chips are compact interactive buttons that represent a selectable option, such as a filter or category. They can be toggled on and off by the user.

Quarantine

DesignDevelopAccessibility

Chips are compact interactive buttons that represent a selectable option, such as a filter or category. They can be toggled on and off, carry an optional leading and trailing icon, and communicate a clear selected state — reach for a chip when the user is choosing among options, not triggering an action.

Anatomy

Section titled “Anatomy”
  1. Chip
  2. Leading icon
  3. Label
  4. Trailing icon

When to use it

Section titled “When to use it”

Use a Chip when:

  • Users apply or remove filters within a search or listing experience.
  • Users pick from a group of options where more than one choice is allowed.
  • You need to display active selections that the user can dismiss individually.
  • The interaction is user-initiated and the element must communicate a selected or unselected state.

Avoid Chips when:

  • You’re showing read-only metadata or categorisation with no interaction — use a Tag instead.
  • You’re communicating a system-assigned state such as availability or stock status — use a Tag status variant instead.
  • The intent is to trigger an action rather than manage a selection — use a Button.
  • The element is purely decorative and carries no interactive meaning.

Properties

Section titled “Properties”

Size

Two sizes: Small (the default) and Large. Small suits dense filter rows and inline placement; large gives more tap area on touch surfaces. Both keep the same anatomy and only scale padding, icon, and text.

Icons

A chip can carry an optional leading icon (for example a check that reinforces the selected state) and an optional trailing icon (a close cross to dismiss, or a chevron when the chip opens a dropdown). Decorative icons stay hidden from assistive tech.

State

Chips move through Rested, Hover, Active, Selected, Disabled, and Focused. Selected pins the chosen appearance — a dark fill that reads as “on” — while active mirrors the pressed look, useful while a menu the chip controls is open.

Surface

Chips adapt to the surface they sit on. Use the default treatment on standard backgrounds, On image over photography, and On solid on dark or contrast backgrounds. Each keeps the label and icons legible against its backdrop.

Selection

Chips support single and multi selection. In a single-selection group only one chip can be on at a time; in a multi-selection group any number can be selected together — pair each with a trailing close so a selection can be cleared.

Platform considerations

Section titled “Platform considerations”

Desktop

Chips sit inline in a filter bar or beneath a heading. Keep padding consistent across the group so the row reads as one rhythm, and lean on the default small size to fit more options in view.

Tablet

Same inline placement, with a little more breathing room. Consider the large size where chips are the primary touch target so they stay comfortable to tap.

Mobile

Wrap chips onto multiple rows rather than truncating labels, and keep the tap area generous. A horizontally scrolling row works for long filter sets, but make sure the first and last chips hint that more exist.

Best practices

Section titled “Best practices”

Chips read as selectable — keep them for choices, and let their state do the talking so users can tell at a glance what’s on and what’s off.

Do

Use chips for filters and multi-select choices, keep labels short and scannable, show a clear selected state, and add a trailing close when a selection can be removed. Match the surface variant to the background so labels stay legible.

Don't

Don’t use chips to trigger actions (reach for a Button) or to show non-interactive metadata (use a Tag). Don’t mix single- and multi-selection behaviour in one group, and don’t overload a row with so many chips that the selection is hard to parse.

Content guidelines

Section titled “Content guidelines”

Chip labels should be short — ideally one or two words — and name the option in plain language (“In stock”, “Petrol”, “Under €30k”). Use sentence case and skip trailing punctuation. Keep labels parallel across a group so the options scan as a set, and make sure each label reads clearly on its own, since a selected chip may be announced out of context.