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 30px, border radius 16px and a font size 13px
  • Smaller variant will have a height of 24px, border radius 16px and a font size 12px
ExampleHeight
Default 30px
Small 24px

Input chips can be in any of the following states:

SolidOutline
Default
Clifford
cancel
Jeff
cancel
Hover
Clifford
cancel
Jeff
cancel
Active
Clifford
cancel
Jeff
cancel
Error
Clifford
cancel
Jeff
cancel
Disabled
Clifford
cancel
Jeff
cancel

Choose Amenities
done
Elevator
Pets OK
Washer/Dryer
Pool
Free Wi-Fi

Behaviors

  • Tap a chip to select it.
  • Multiple chips can be selected or unselected.