Chip

Overview

A Chip is used to allow the user to filter data or elements and make a selection based on a single criteria. A typical use case is a blog section with the ability to only show articles related to a certain category.

When to use

• To filter a category

When not to use

• To present short complementary information, such as status - use Badge

Anatomy

1. ChipGroup
2. Container
3. Text

Variants & States

Active

A chip has an active property that communicates if this chip is currently selected or not. Inside of a ChipGroup only one chip can be active at any given time. If another chip is selected in the same group any other active Chip is automatically set to active=false.

State

The Chip states are named after their css pseudo-class.

Hover is activated when the user interacts with an element with a pointing device, but does not necessarily activate it.

Internationalization

For RTL (right-to-left) languages there are no custom adjustments made.

Properties

Usage Guidelines

Content Guidelines

We use chips as small, interactive elements. They can be used for tasks such as filtering or making selections.

Voice and tone

We’re concise and informative.

Copy

• We use a single, descriptive word or a very short phrase.
• We ensure the meaning is instantly understandable.
• We use sentence case (unless it’s a proper noun).
• We don’t use punctuation unless it’s part of a specific number or currency.

Accessibility

• The text must clearly convey its function and state.
• Chips within a group are reachable through standard navigation.
• When a user focuses on a chip, screen readers should announce: the group purpose, the chip label, the role, and the state. For example, “Filter your results list. All. Button. Selected.”
• If the chip includes a remove/dismiss button, we ensure that button has a distinct, descriptive label.