Chips are small elements which present small amounts of information or offer optional actions.
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.
Chips may be dark, medium, or light.
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
Chips can have an optional tooltip that displays on hover/tap.
Color can be used to indicate higher urgency.
Chips can be used to navigate to more content.
With icon variant
Chips can optionally be prepended AND/OR appended with any of the Prism icons.
Chips can be used to select options from a group. Note the sentence case labels.