Skip to content

Chips

Chips are compact elements that represent an input, attribute, or action.

They allow users to enter information, make selections, filter content, or trigger actions. While buttons are expected to appear consistently and with familiar calls to action, chips should appear dynamically as a group of multiple interactive elements.

Principles

Compact: Chips are compact components that represent discrete information.

Relevant: They should have a clear and helpful relationship to the content or task they represent.

Focused: Using chips should make tasks easier to complete, or content easier to sort.

When to use

You should use chips in the following situations:

  • When categorizing and tagging content to facilitate easy identification and filtering.
  • When allowing selection and input to visually indicate users' choices from predefined options.
  • When providing filtering options to help users refine their searches effectively in applications.
  • When creating interactive elements to act as buttons for quick actions, offering immediate feedback on selections.
  • When managing dynamic inputs to enable users to add or remove items flexibly.

Types

Choice chips

This type allows selection of a single chip from a set of options.

These chips clearly delineate and display options in a compact area. They are a good alternative to toggle buttons, radio buttons, and single select menus.

Filter chips

These chips use tags or descriptive words to filter content.

This type clearly delineates and displays options in a compact area. They are a good alternative to toggle buttons or checkboxes.

Do not use chips for a single option.

Action chips

They offer actions related to primary content. These chips should appear dynamically and contextually in a UI.

An alternative to action chips are buttons, which should appear persistently and consistently.

Design guidelines

Anatomy

  1. Container
  2. Icon or thumbnail (optional)
  3. Text
  4. Remove icon (optional)

Container

Chip containers hold all chip elements, and their size is determined by those elements. A container can also be defined by a stroke.

Text

It can be an entity name, description, tag, action, or conversational.

Remove icon

Some chips can include a remove icon.

Sometimes, other icons are used in this position, but their use and functionality should be validated beforehand.

Colors

We use colors to determine the status of an entity. Each color conveys an emotion and provides the same experience to the users of our applications.

Use labels that represent the chip's state according to each color.

Specs

For x-small and small chips

For default chips

For status chips