UI Library
Chip
Pills for tags, filters, and removable items.
Color
Chip colors follow the same tone system as other controls.
PrimaryDefaultSuccessWarningDanger
Elevated
Raised chips work as light emphasis controls.
PrimarySuccessWarning
Outlined
Outlined chips invert the fill treatment.
PrimarySuccessWarning
Rounded
Rounded chips can vary by corner treatment.
0smlgxl
Closable
Closable chips support quick removal.
With Icon
Icons help chips carry a meaning without extra text.
Notifications Approved Review
With Avatar
Avatar chips are useful for people and teams.
JD John DoeVP Vivian PadillaAB Angel Bishop
Sizes
Chip sizes should stay compact but legible.
SmallDefaultLarge
In Selects
Chips can represent selected values in field controls.
Finance xInventory xSales x
Expandable
Expandable chips reveal secondary information.