Design

​

Anatomy

The Chip consists of three primary elements that work together to visually label and organize information.

1. Content
2. Close action
3. Custom background

​

Options

The Chip supports clickable, closeable, and customizable configurations to accommodate various labeling scenarios.

​

Clickable

By default, a Chip is a non-clickable label. Use a clickable Chip for navigational contexts.

​

Close

Chips can also have a close action, allowing a user to manually remove the Chip. Clickable and close can also be used together in a single Chip, but only when the size is set to medium.

​

Custom background colors

Chips provide one color by default. They can accept any color or Token value. Text color is auto-calculated to be the highest available contrast. It is suggested to use a Token value that supports theming.

​

Sizes

Refer to the choosing a chip size section for more sizing recommendations.

​

Behavior

The Chip responds to user interaction with distinct visual states and flexible overflow handling.

​

Visual States

With custom colors, the hover background is lighter when the text is white, and darker when the text is black.

​

Without close

​

With close

​

Overflow handling

​

Truncation

By default, Chips will truncate, rather than wrap.

​

Wrapping

Chips can be configured to individually wrap when there is not enough space.

​

Suggested group overflow

The Chip on its own does not provide an opinion on grouping. Wrap groups first, prioritizing group wrapping before wrapping individual Chips.

​

Usage Guidelines

Use the Chip when visually labeling and organizing statuses, metadata, and objects.

​

Alternatives

​

Chip vs Badge

Chips are used to categorize, label, and add context to items whereas Badges are used to indicate something requires attention, such as a notification. Additionally, Chips can be interactive while Badges are not.

​

How to Use

​

Default

The default Chip visually highlights elements and provides user interaction.

​

Chip group

Chips are frequently paired together to form a Chip group.

​

Color

When implementing Chips, it is important to carefully consider what color is being used so that meaning and relationships are not implied when there is none. For example, green is often meant to indicate “success” and red is used to indicate “danger” or “failure”. Consistent usage is essential for helping users efficiently understand the status of something.

​

Choosing a Chip size

Choose a Chip size based on its relative importance within the UI. Some general suggestions for Chips are provided below.

​

Legend

✅ recommended ⚠️ use with caution ❌ do not use

​

Content

Content within the Chip should be short and descriptive, helping users understand context at a glance.

• Chips should be short and descriptive. Users should understand context at a glance.
• Use both color and text together to provide meaning so that color alone is not the only indicator of meaning.
• Use Chips in moderation as they add visual noise to the page.
• Chips may be used for both textual and numerical content.

​

Keyboard Interaction

Users can navigate the Chip using standard keyboard controls.

​

With clickable Chip

​

Accessibility

The Chip provides all accessibility needs out of the box. With custom background colors, the Chip will automatically provide a text color that will be at least a 4.5:1 ratio, satisfying WCAG AA requirements. For more guidance on accessible interaction components, see button accessibility best practices.