Chip

A chip is a compact, interactive UI element used to represent small pieces of information, actions, or selections.

Introduction

Chips are versatile components that allow users to display and manage information in a compact format. They are commonly used to represent selected options, tags, filters, or interactive elements within an interface. Their lightweight and flexible design makes them ideal for enhancing user experience by enabling quick and organized interactions.

Anatomy

1.
Prefix (Optional): the prefix can be an icon or an action icon that provides additional context or functionality.
2.
Label: the primary text that conveys the chip's meaning, such as a tag name or a selected option. It should be concise, clear, and relevant to the chip's function.
3.
Suffix (Optional): the suffix can be an icon or an action icon that enhances interactivity.

Using chips

Categorization

Chips are commonly used to organize content by grouping related topics, products, or subjects. They often serve as a summary of the page's content. When using chips for categorization, ensure that they are relevant to the displayed information to maintain clarity and usability.

When used alongside the select component, chips serve as effective filter facets, allowing users to refine search results by choosing and removing specific attributes. This combination enables users to include or exclude preferences directly from their queries. For faceted filtering, chips should be dismissible, ensuring effortless adjustments and a more intuitive selection experience.

Chips vs. Badges

While badges and chips share a similar visual style, they serve different purposes in a user interface: chips are interactive, while badges are static indicators.

Component	Use case
Chip	Chips help users categorize, filter, or organize information. They often include keywords or metadata, providing quick access to related content and aiding navigation.
Badge	Badges function as visual indicators, displaying status or contextual information. They are non-interactive and rely on color and text to communicate meaning.

Best practices

Keep labels concise and meaningful

Labels should be short and clear, ideally one or two words.
Avoid long text that may cause truncation or wrapping issues.
Use sentence case for readability (e.g., "New York" instead of "NEW YORK").

Avoid overloading the UI with too many chips

Use chips only when necessary to avoid clutter.
Group related chips logically and consider collapsible chip groups if the list becomes too long.

Ensure icons are contextually relevant and avoid redundancy

While the component configuration is flexible enough to allow multiple icons or action icons, it is not recommended to use two icons or two action icons within the same chip. Instead, a balanced approach should be followed: pairing one icon (to provide context) with one action icon (to enable an interaction).

Icons should add value to the chip, not just be decorative.
Ensure that icons are easy to recognize and understand within the chip's context. The selected icon should accurately represent the chip's purpose, while the action icon should clearly indicate the interaction it triggers.
Icons should not compete for attention or convey conflicting messages. Instead, they should complement each other to enhance usability.
Follow the guideline: one informational icon + one action icon (if needed)—avoid using two icons of the same type.

Manage chip overflow gracefully

If there are too many chips in a row, consider horizontal scrolling or wrapping.
For dynamic content, provide a "Show more" option to avoid overwhelming the user.