Skip to main content

Chips

Chips represent small blocks of information and are commonly used for input or filtering.

Specifications

States

Chips can have the following states:

  • Default
  • Focused
  • Selected/Active
  • Disabled
  • Error

Chips States

Sizes

There are two sizes of chips:

  • Default: 48px height and 16px font size
  • Smaller variant: 32px height and 14px font size

Chips Sizing

Behaviors

  • Tap a chip to select it.
  • Multiple chips can be selected or unselected.
Last updated February 27, 2023.