Chip

How to use

Use a Chip to show small pieces of information (like tags, filters, or choices) or to let users take quick actions (like removing a tag).

A Chip usually has a short label and may include an icon.
Place Chips close to related content. For example, below a search box or on a list filter bar. They help users understand options at a glance, choose filters, or delete items easily.

Icon

You can use icons on a Chip to give the users a better understanding of the content.

Types

Chips have different styles depending on their function.

Choice chips

These chips present a predefined set of options directly in the interface. Users can select or deselect them to refine their choice.

Dismissible chips

These chips display the filters currently applied by the user. They usually appear after an action, such as selecting a category or setting a price range. Each chip includes a close button on the right so the user can remove it easily without leaving the current view.

Group of Chips

Use Chips in groups to summarize active filters and to present selectable options. Dismissible Chips appear above the results list after the user confirms selections in a filter panel (drawer or dialog). Choice Chips (non-dismissible) are also arranged in groups to let users scan and select options. Use the same left-to-right layout with wrapping. Space adjacent Chips using aero-space-fix-xs.

Clear all

Optionally add a trailing Clear all Link Button (behaves like a button, styled like a link) to remove all applied filters at once; separate it from the last Chip with aero-space-fix-md so it stands out and reduces accidental clicks.

Do’s and Don’ts

Accessibility

• Always include a text label inside the Chip so screen readers can describe it.
• If the Chip is dismissible, make sure the close icon is focusable by keyboard and has an aria-label.
• If Chips are used as filters and change the content on screen, make sure this change is announced for assistive technologies.

Content

• Use short and meaningful labels (usually 1–3 words).
• Choose words that reflect categories, tags, or quick filters, not full sentences.
• Write labels in sentence case: only capitalize the first word, unless it’s a proper name.
• Chips are not for giving feedback or long information — use them only for keywords or short actions.

Availability

Each global component provides a shared design direction across platforms. Implementation is owned by each platform team, so development status may vary per platform.