Chips

Planned

Chips are low-emphasis compact actionable elements that represent a selection or can be used in a button-like action. Chips provide an affordance for the user to understand an action is possible without demanding a high level of attention.

Chips

Anatomy

The chip component is made up of a surface and a label, but can optionally display a quick action that allows the user to delete a chip. A trailing avatar can also be displayed to provide an additional layer of information in certain situations. Chips come in three variants: selection chip, action chip, and add chip.

Selection chip

The selection chip behaves in many ways identically to the traditional radio button and checkbox; allowing an either-or selection, or a multi select from a list of chips. Once a selection is made, the trailing icon appears to provide an additional layer of system feedback..



  1. Surface/container
  2. Leading icon — Avatar (optional)
  3. Label — Caption 
  4. Trailing icon — Avatar

Action chip

The action chip behaves in many ways identically to the traditional button; allowing a way for the user to initiate an action or flow. Once a selection is made, the action is immediately initiated. The action chip is  meant to be a “no emphasis” level CTA.



  1. Surface/container
  2. Leading icon — Avatar (optional)
  3. Label — Caption

Add chip



  1. Surface/container
  2. Leading icon — Avatar (optional)
  3. Label — Caption 
  4. Quick action button

Specs

States

Theming


Placement


Behavior

Developer Docs

Vue Developer Docs

Component documentation coming soon!