Chips are compact elements that allow users to select a choice, filter content, or trigger an action.

Chips are multi-purpose components that can be used for input, to represent attributes, or to initiate actions. Our design system distinguishes three chip types for specific needs.

  • Input chips
  • Choice chips
  • Filter chips
  1. Container
  2. Border
  3. Fill
  4. Icon
  5. Text label
  6. Trailing icon (optional)

Our chips are based on Material Design chips.

Chips are available in normal (medium) and compact (small) sizes. Chip size is based on an integral number of nudges, where 1 nudge is 8px (img). Compact chips use a smaller font.

  1. Small – Based on a height of 3 nudges (24 px)
  2. Medium – Based on a height of 4 nudges (32 px)

Chips can use color to represent different kinds of status.

  1. Status Positive
  2. Status Negative
  3. Status Notice

The chips in a chip group are arranged horizontally within the containing component (such as a text field).

Chips are interactive components that respond visually to user actions and system-initiated events.

Chips provide visual feedback when the pointer hovers over them.

Our components have been designed to comply with the WCAG 2.1 AA accessibility guidelines. For more information about how our design system complies with color-related accessibility guidelines, see Foundations > Colors > Accessibility.

For more information about chips, see:

Related components: