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. In the system, chips are categorised into three types: Selection, Filter, and Action, each serving a distinct purpose.

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. Leading icon (optional): Visually supports the label.
  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.
  4. Tick icon (optional): A tick icon indicates the chip is selected.
  5. Trailing action (optional): A trailing icon indicates further interactions.

Types of chip

Selection chip

Selection chips represent choices or inputs made by the user. They can be used for single or multiple selection among predefined options, or to display context-based suggestions and recommendations.

A multi-select dropdown menu used as a filter, showing Pizzas and Desserts as the two selected options.
A group of selection chips for days of the week, with Wed, Thu, and Fri selected.
A chatbot interface displaying three suggestion chips: Get help with medication selection, Order medication, and Other.

Filter chip

Filter chips allow users to refine or narrow down content. They are commonly used on search or results pages and can also open additional controls or menus for more advanced filtering.

A user interface example of filter chips on a food delivery page, with options like Free delivery and No minimum order above a list of restaurant results.

Action chip

Action chips behave as interactive elements that trigger navigation or perform an action. They can act as links or anchors leading to another page or view.

Do
  • Present action chips in a group that offer relevant contextual options.
Don't
  • Don’t use chips for CTAs, use buttons instead.
  • Don’t use only one single chip.
A user interface example of action chips, showing their use for toggling order status (Prepare, Handover, Done) and navigating settings tabs (Summary, Additional price(s)).

Variants

Default

The default variant of the chip component.

Outline

The outline variant of the chip component.

Translucent

The translucent variant of the chip component.

Ghost

The ghost variant of the chip component.

Modifiers

Leading icon

Leading icon provides context and visually supports the label. It is available for all variants.

A chip component with a placeholder icon on the left.

Trailing icon

A trailing icon can be applied to indicate further interaction, such as opening up a popover or bottom sheet. Only available in Filter chip.

A chip component with a chevron icon on the right.

Tick icon

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

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. Clicking a chip with a close icon will dismiss the chip. Only available in selected Selection chip.

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 48.

Content

String

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

Overrides

Icon

A selected chip component with the value of string.
  1. Trailing icon: In Filter chips, the trailing icon can only be replaced with icons from the Chevron section.

Alignment

A chip with an icon and text, demonstrating hug content alignment where the container fits tightly around the content
A chip with a leading icon, text, and a trailing x icon, demonstrating fill alignment where the container expands to push the trailing icon to the far right.
  1. Overall content: By default, the chip container is set to Hug the content. If a chip needs to fit within a specific layout or grid, the overall content can be aligned to either centre or left.
  2. Trailing content: When a chip has a trailing icon, content can be set to Fill to expand and match the container width, allowing the trailing icon to align with the right edge.

Layout

If there is a Chip grouping, by default 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

Interactions

Close

The whole chip is interactive, except when the close icon appears, in which case only the close icon is clickable to perform the action.

A chip component where the entire component is interactive.
A chip component with a close icon, where only the close icon is interactive.

States

The chip has two states:

Unselected

Three visual styles for an unselected chip: default, outline, and ghost.

Selected

A single selected UI chip shown with a dark, solid background and a checkmark icon.

Interactive states

Outlines the atomic level interactive elements for the component.

Default

Five chip components in their default state, with three light-colored chips and one dark-colored chip.

Hover

Five chip components in a hover state, showing a slight visual change compared to the default state, with three light-colored chips and one dark-colored chip.

Active

Five chip components in an active state, with three light-colored chips and one dark-colored chip, showing a visual indication of being pressed or selected.

Focus

Five chip components in a focus state, with three light-colored chips and one dark-colored chip, showing a clear outline or highlight indicating keyboard focus.

Disabled

Five chip components in a disabled state, appearing greyed out or muted, indicating they are not interactive.

Loading

Five chip components in a loading state, showing a spinner or animation within each chip, indicating content is being loaded.

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 Web Component
 Stable
Figma Web Documentation
 Stable
Figma App Component
 Stable
Figma App Documentation
 Stable
Web Components
 Beta
Vue [Fozzie]
 N/A
React [Snacks]
 Stable
iOS JustUI [UI Kit]
 Stable
iOS PIE [SwiftUI]
 Planned
Android PIE [Compose & Views]
 Stable
Back to top