Chips

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

Specifications

There are two sizes of Chips:

  • By default, Chips should have a height of 48px and 16px font size
  • Smaller variant will have a height of 32px, 14px font size

Chips Specifications

States

Chips can have the following states:

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

Chips States

Sizes

Chips Sizing

Types

Common types include Input and Filter Chips. The are available in both solid and outline variants

Input Chips (Solid)

Input Chips Solid

Input Chips (Outlined)

Input Chips Outlined

Filter Chips (Solid)

Input chips display information used in fields, such as an entity or different attributes.

Filter Chips Solid

Filter Chips (Outlined)

Input chips display information used in fields, such as an entity or different attributes.

Filter Chips Outlined