Skip to main content

Chip

A chip is a compact component used to represent information or selected choices.

Overview

The purpose of chips is to provide a visual representation of a specific entity or attribute, such as a selected option or a labelled category. Chips can also be interactive, allowing users to remove or modify the selected choices.

Chips are commonly used in various contexts, including filtering options, search results or any situation where concise and visually distinct information needs to be displayed.

A group of chips that are horizontally stacked together.

Dos and Don’ts

Do
  • Chips should appear dynamically as a group of multiple interactive elements.
Don't
  • Don’t use when an interaction is not required, use a tag if needed.

Anatomy

Anatomy of the chip component.
  1. Icon (Optional): Non-interactive icon that can be used to visually support the string.
  2. String: Text label informing the user of the option/selection.
  3. Close (optional): Allows the Chip to be dismissible, but the application should provide a way for them to easily add it back.

Variations

Default

The default variant of the chip component.

Outline

The outline variant of the chip component.

Ghost

The ghost variant of the chip component.

Modifiers

Icon

Icons are always placed in a leading position.

A chip component with a placeholder icon on the left.

Tick icon

Tick icon can be added for clarity and decision support when using chips to filter or multi-select to the selected state.

A chip component with a tick icon on the left.

Close icon

Close icon can be added to the selected state to allow users to remove the selection or filter.

A chip component with a close icon on the right.

Size

Chips have a minimum width of 48px.

A chip component with the value of 1.

Content

  • Keep the strings short so they are easy to read and scan.
  • Use sentence case.

Layout

If there is a Chip grouping, by default they are laid out horizontally and stack if required. A spacing of 8px is used horizontally, and 12px for vertical stacking.

A group of chip components flowing into multiple rows because the container isn’t wide enough.
A group of chip components laid out horizontally and stacked

Usage

Input

Input chips usually represent an entity or different attributes. They can be added or removed within input fields.

Chip components used in an input field

Choice

Choice chips allow users to select one or more chips from a set of options (minimum of 2).

Chip components corresponding to a different weekday

Filter

Filter chips allow users to refine content by selecting one or more chips from a set.

Chip components representing various cuisines

Action

Action chips trigger actions related to primary content.

A chip component with a heart icon, allowing users to save an entity.

Interactive states

Outlines the atomic level interactive elements for the component.

Default

The default state of the chip component.

Hover

The hover state of the chip component.

Active

The active state of the chip component.

Focus

The focus state of the chip component.

Disabled

The disabled state of the chip component.

Loading

The loading state of the chip component.

Examples

Outlines the atomic level interactive elements for the component.

LTR examples

Here are some examples of chips in a left-to-right context:

A left-to-right example of a cuisines filter using the chip components
A left-to-right example of an offers filter using the chip components

RTL examples

Here are some examples of chips in a right-to-left context:

A right-to-left example of a cuisines filter using the chip components
A right-to-left example of an offers filter using the chip components

Resources

Figma Component
 Available
Figma Documentation
 Available
Web Components
 Beta
Vue [Fozzie]
 N/A
React [Snacks]
 Available
iOS JustUI [UI Kit]
 Available
iOS PIE [SwiftUI]
 Planned
Android [XML views]
 Available
Android [Jetpack compose]
 Planned