Level 1, and the largest family of any kind in the product: 1,679 placements on 106 painted screens. A label a person picks between, when the choice is small, immediate and does not leave the screen. Five faces, five surfaces, and one of the five answers two of them. Measured 2026-08-08.
Same reason as button and icon button: a level is a shelf and a component is a page. But this component has a second reason the other two do not, and it is the reason a single specimen is actively misleading here rather than merely thin: a chip's subject is its GROUP and the chosen one in it. Lift one out of its rail and what is left is a padding. A reader learns nothing about the only thing the control does.
The deleted stand made exactly that mistake and the archive records it: two lone chips stood on the button page as if they were actions, which was worse than not listing them. Every specimen below therefore stands with its siblings and one of them chosen.
The level and its reason stay on the atoms page.
.chip is four declarations and nothing a person can see: a
pointer, the body face, no underline and a centred label. The last two arrived with the ELEMENT on
2026-08-07, when a chip that navigates became an <a> rather than a
<button> wrapped in one, and both were values the tag had been supplying for
free.
A base class is the atom or it is a face, never both. The day
this file's one face was written on .chip itself, 722 elements took values nobody
had chosen for them.
Measured today: 0 of the 1,679 placements wear a bare .chip.
Every one carries a face, which is what makes the sentence above checkable rather than a
principle.
quiet, 530 placements on 105 screens, and 525 are in the header
A scrolling strip: transparent on a transparent 1px band, a pill. The band is not decoration. It means the box is the SIZE's answer, so a chip does not grow by two pixels at the moment it is chosen and given a brass edge.
amount, 480 placements, and 448 are in a dialog
What a chip looks like when it is one of the things you fill in on a sheet:
--bg-control on a hairline, a 10 corner. This face is the one that proved the
scope was a bug, and then proved it twice: until 2026-08-08 every rule for it was written
.app-case .chip-amount, and 526 of the 559 buttons that stand in a dialog in this
product are in a dialog that carries no app-case. The chip beside the amount field
was drawn by the User Agent while the field itself was right.
The first fix wrote the selector twice and missed a state the same
day. .app-case .chip-amount, dialog.app-dialog .chip-amount doubled the REST
face and nobody doubled the CHOSEN one, so on 105 screens the selected amount had a brass edge
and nothing else: ground rgb(36,40,47) against rgba(199,162,78,.09),
weight 400 against 700, no halo, and cursor:default on all 420 chips. The identical
chip in the bet panel had all four. A doubled selector is a face kept in two places, and the
second place is the one that gets forgotten.
nav, 294 placements, and it is the loudest chip in the product
The category band: --bg-chip on a --bevel-notice edge
at 14px, and it is the loudest on purpose, because on a phone it is the one control that
changes what the page is about. It is also the only face that answers a finger with a
darker ground, and that arrived by reasoning about the tap rather than the pointer: the chip most
likely to be tapped in this strip is the one you are already on, because tapping it is how you get
back to the top of it.
Nine of the 294 are the Load more button, which stopped being a second drawing of this chip on 2026-08-07 and started carrying it. That merge is visible in the count and in nothing else, which is what a merge in this system looks like when it is done right.
rail, 63 placements on 9 screens, in two different rails
A segmented control in a trough: no edge, no ground, muted ink, a 10 corner. Thirty-six of them are the chart range and 27 are the comment sorter, and until 2026-08-05 those were two declaration blocks in two files, byte for byte identical including property order. Nobody had put the two readings side by side. An instrument merged them without being asked, which is what says two files were drawing one control.
lane, 312 placements on 32 screens
The sub-category rail, and the next section is about it.
Every other face here answers one surface. The lane answers two, and it
carries the media query itself, because what changes with the window is the SURFACE it stands on
and not where somebody put it. Measured on event-feed-crypto.html, ten lanes:
| at 390 | at 1280 | |
|---|---|---|
| width | content: 81, 114, 131, 106 | 206, all ten |
| corner | 100px, a pill | 10px |
| the count | 37px in, straight after the label | 166px in, pushed to the far side |
| the rail | a horizontal scroller | a column beside the content |
A specimen has one width, and that is the whole reason this section is a table. The pair above shows the narrow face; the wide one is four numbers rather than a picture, and printing them is the honest alternative to showing half a control and calling it the control. Reading only one of the two put this chip in the wrong component for a day: at 900 it looks like a navigation row, and it was filed under `navitem` until somebody read it at 380.
A brass TINT inside a brass edge with brass ink, bold, and a halo that is a glow with negative spread rather than a lift. The recipe colours what a chip already has and adds no parts, so the rail chip is borderless at rest and stays borderless, and no box moves when a choice is made.
| how it is said | worn | when |
|---|---|---|
.sel | 136 | a class survives the pointer leaving, which is what a filter, a range and an amount need |
[aria-current="page"] .chip | 192 | the chip points at the page you are on, which is correct for navigation and is not going to be replaced by a class |
aria-pressed="true" | 1 | and it is not this component's: the one placement is a bookmark, which is an icon button |
Five faces said chosen five different ways until 2026-08-07. The lane alone said it with 18 per cent of the action colour written as a colour function, a solid brass edge and semibold, because on the day the other four were unified this control was filed under a different atom. Bringing it in moved 160 readings and exactly one pixel of layout: a chosen lane went 94px wide to 95, because bold is wider than semibold.
What is deliberately not here is a hover on the chosen chip. Measured across all six chosen kinds in both themes, not one answers a pointer, and that uniformity is the decision rather than the gap: a chosen control's whole face is already the answer, and a second one under the pointer would compete with it.
.chip-ic, a category's mark, 285 worn, drawn in
currentColor so the chip's ink is its ink. .chip-cnt, a sub-category's
count, 312 worn, mono because it is a figure.
Both live here rather than with the rail that holds them, and the test is the one a level page can state in a line: they change with the CONTROL's state, which is what a part of a face does. Leaving them behind made the atom read as containing a component, which is the level arithmetic's blind spot arriving through the back door.
Read on ten screens at 390 and 1280 in both pointer branches, dialogs forced open. Width changes with the label and height does not, so height is the axis worth a table.
| face | worn | fine pointer | coarse |
|---|---|---|---|
.chip-quiet | 530 | 38 | 44 |
.chip-amount | 480 | 36 | 44 |
.chip-lane | 312 | 41 | 44 |
.chip-nav | 294 | 47 | 47, already above the floor |
.chip-rail | 63 | 26 | 44 |
FOUR OF THE FIVE MOVE, and until 2026-08-08 only ONE of them did. This
file used to carry its own floor and it named two faces, .chip-quiet and
.chip-nav, one of which did not need it. So under a finger the amount chip rendered
36, the lane 41 on 312 placements over 32 screens, and the rail 26, and nothing in a list says
what it left out. The floor is one rule in components/base.css now, keyed to
.chip, which is the class all five already carry.
Set against the icon button, where one face of eight moves and four are excluded by name with a reason each, the two pages together say what the floor actually is: a family-wide rule with a short list of argued exceptions, rather than six per-file lists that each remembered a different part of the product.
| face | hover | press |
|---|---|---|
.chip-rail | the ink comes up to --text-primary and nothing else moves, which is the whole idea of a quiet control | --bg-pressed, one rule for the family, .chip:active. It is written AFTER the chosen rule at equal specificity, so the chip you are already on still answers the finger |
.chip-quiet | a white wash at 6 per cent | |
.chip-nav | the ground brightens and the edge goes brass | |
.chip-lane | a 10 per cent action wash inside a solid brass edge, the only tint of its kind in the family | |
.chip-amount | decided rather than carried: the deposit sheet had one and the bet panel had none, the same face on the same control, so the face took the hover and both places answer now |
The focus ring is negative on one face and nowhere else in the family. The category strip scrolls sideways and its list clips at a 2px padding box, so a ring drawn outside the chip lost its top and bottom runs and rendered as two vertical bars. Load more inherits that ring and does not need it, which is the one thing the merge costs and it costs nothing a person can see.
Its own width query: 900 RAIL, 640 DESK. The chip's box is fixed at every width, 81px on its widest specimen. What the rungs move is the LANE: at RAIL the .chip-lane goes full width, spreads its children apart and drops its border, which turns a row of chips into a rail. Below DESK the nav chip takes position:relative so its own count can hang off it.
And since 2026-08-15 the nav chip changes SIZE below DESK: 48 tall to 44, on all 294 placements. 44 is the touch floor's own number, declared once in base.css for the whole control family. Setting the height alone would have done nothing, which is the fact worth carrying off this page: the chip's content box is 47 before any floor is consulted, so min-height:44px on it is present, correct and consulted by nothing, exactly the inert declaration loadmore.css names in its own opening. The padding is what decides the box, and it comes down with the height, 12 to 8 and 20 to 12. The strip is a scroller, so the sides matter as much as the height: the two widest chips go 131.1 to 111.1 and 122.2 to 102.2 at 360, and the band around them 70 to 66. Above the rung nothing moved, 48 and 78.
A face is an answer to the surface the control stands on. Five faces, five surfaces, and the fifth answers two because its surface changes with the window. That sentence is the whole map: it is why the amount is not the rail chip with a ground added, and why reading the lane at one width put it in the wrong atom for a day.
A selected chip is a tint, never a fill. A solid brass ground is the
primary action's own face, and a rail of chips is not asking anybody to commit to anything.
DESIGN.md decides it twice, and components/quick.css records what it
cost the one time a chip took the fill: a lit brass $20 sitting directly above a lit brass Add
funds.
The container gives the ground, not the chip. Three of the five faces paint no ground at rest, which is what lets one control stand in a trough, on a stone band and on a bare section without any of them looking wrong.
Never draw it again in the file of whatever holds it. That is exactly how it came to exist four times: comments.css owned the sort segment, tabs.css the chart range, quick.css the amounts, catnav.css three more, and every one of those files was right about its container and wrong about the control.
Never give the atom a face. A sixth surface takes a sixth face; a difference of four pixels takes none, which is what the Trending sub-filter turned out to be against 525 identical chips in the header.
Never let a part stay behind. If a chip grows something that lives inside it and changes when the chip does, it comes here and takes a chip name.
Never show one alone. A chip's subject is its group and the chosen one, so a single chip lifted out of its rail is the half that carries no information.
The level and its reason: the atoms page. The
stylesheet and the argument for every value: components/chip.css. The deleted stand's
writing: docs/kit-archive/authored/chip.md, which is where most of the history above
was kept and where its numbers stop being current. The archive counts 466 placements and the
product wears 1,679 today, because that count was of one net and this one is of every element
carrying .chip on all 106 screens.
This was the third component page written and it was the last for about an hour: on the same day the threshold that had let only three through was dropped, and the atom shelf became ten components with ten pages. The other nine: button, icon button, nav item, odds bar, input, yes / no, toast, skeleton, toggle.