Chip is a compact control for filtering a list, choosing from a set, or showing an entry someone added.
A compact token you can select or remove. Filters, tags, multi-select entry. For moving between views use Tab.
Click it. Selecting swaps bg/white-0 for bg/strong-950 and the label for text/white-0, and drops the border entirely. The close x is the one thing that does not switch.
Five ways to lead the chip. The axis changes the element in front of the label and nothing else, no colour, no height, no radius.
The bigger box costs left padding: 12 on Type Default, 6 on the four that lead with 20, so the chip measures 99 then 97. The file names Erik Holmberg at Size sm, Grinning Face, United States and the Slack mark. Brand stands in a neutral tile, not a third party logo.
One boolean axis, and the strongest thing the component does. Selected fills the whole pill instead of marking it, so a row of chips reads at a glance.
Both tokens invert with the theme: a selected chip is a black pill with white text in light, a white pill with black text in dark. Selected True is drawn identically in Default, Pressed and Focused, so a chip that is on carries no state reading across those three. Disabled is the exception, and it is in the next section.
Four drawn states on an unselected chip. Three of them are a fill change and nothing else. Disabled is the odd one: it leaves the box exactly where it was and moves the label and both icons instead.
State ships 4 options and the set holds all 40 variants: Disabled runs the full Type by Selected grid. Unselected it keeps bg/white-0 and the border and recolours the label and both icons to the disabled pair. Selected it is the one chip in the set that does not take bg/strong-950, dropping to bg/soft-100 with the same disabled label. Pressed keeps the border on Type Default and drops it on the other four; Focused pushes the left padding from 6 to 8.
Two booleans, both true by default. Turn the icon off for a plain filter, turn the close button off when the chip is a label rather than something to remove.
The widths are arithmetic, not settings: 12 of padding, a 16 box, the label wrapper at 6 plus 31 plus 6, another 16 box, 12 of padding. Drop either box and 16 goes with it.
Three variant axes and four instance properties. 4 x 5 x 2 is 40 variants, and the set holds all 40.
Disabled covered three cells and now covers ten, which took the set from 30 variants to 40. It is the only state that leaves the box alone: fill, border, radius and padding all hold, and the label and both icons move to the disabled pair instead. At Selected True it is also the only state that does not take bg/strong-950.
Every value the component reads, resolved through its aliases to the Foundations primitive.
The close x is the one problem in the set. colors/alpha/black/alpha-24 is a primitive with a single mode, so it stays black at 24 percent wherever it lands: invisible on a selected chip in light, invisible on every chip in dark. Disabled escapes it, because there the file paints the x fg/disabled-400. The page reproduces both rather than swapping in a semantic token, which is a system decision. Geometry runs on dimensions/radius/lg 12, dimensions/spacing/3 12, dimensions/spacing/1-5 6 and dimensions/icon/stroke 2.
Use a row of chips as a filter set and let selection carry the state. Drop the close button when nothing is being removed.
Do not move between views with chips. That is Tab, which owns the underline, the swipe and the screen it belongs to.
Keep the label short enough to stay on one line. The chip hugs its text and never wraps, so a long label pushes the row into a horizontal scroll instead of breaking.
