Chips

Definition

Chips are small elements which present small amounts of information or offer optional actions.

Common Characteristics

All chips have a background color, and are 24px high. They have 8px left and right padding unless this is increased to achieve a 40px minimum width.

Chips labels may be bold ALL-CAPS, or regular sentence case. Maintain a minimum of 4px space between chips vertically and horizontally.

Basic Chips

Light ChipMedium ChipDark Chip
Light ChipMedium ChipDark Chip
Light ChipMedium ChipDark Chip
Light ChipMedium ChipDark Chip
Light ChipMedium ChipDark Chip
Light ChipMedium ChipDark Chip
Light ChipMedium ChipDark Chip
Light ChipMedium ChipDark Chip
Light ChipMedium ChipDark Chip

Chips may be dark, medium, or light.

Transparent Chips

Light ChipMedium ChipDark Chip
Light ChipMedium ChipDark Chip

Chips can be marked as transparent. Background colors will become transparent while additional stylings remain unchanges. This is useful for working with dark backgrounds.

Chips with Tooltips

CH
CH

Chips can have an optional tooltip that displays on hover/tap.

HMRCHGAMPPACH-SACH-BAC1

Color can be used to indicate higher urgency.

Actionable Chips

SDDEWSCRCR 5CR 5.0CR 5.0

Chips can be used to navigate to more content.

Filter Chips

OVEPassengerHondaAccord Sedan10,000 - 30,000 miAL - America's Auto Auction Birmingham

With icon variant

OVE

Chips can optionally be prepended AND/OR appended with any of the Prism icons.

Selection Chip

Selected

Selected option 1Selected option 2Unselected

Chips can be used to select options from a group. Note the sentence case labels.