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.

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