i

The button

CMP·01

The control that does the thing. It is the only element on a page whose entire job is to be pressed, and it is one of three components that all eight surveyed design systems ship — the others being checkbox and text field.

Its appearance has changed more than its behaviour. What follows is eight specimens, each drawn here in CSS from the properties that define it. Nothing is copied from a screenshot and nothing is lifted from anyone's stylesheet. Where a period got an effect out of images because CSS could not do it yet, the specimen draws the effect and says so — a reader must not come away thinking 2006 had a property it did not have.

What the systems ship

63 measured

Read off the live page of every design system in the register that renders a primary button, at a stated viewport on a stated date. Not asked of a model, not read from documentation, and counted from the corrected register rather than from the raw measurement — five more were measured and belong to rows this building has since withdrawn.

Square corners 20
Rounded 31
Pill 12

20 of 63 have no corner radius at all — the largest single group, on a profession that mostly talks about rounding. 12 are pills. The fashion is real and it is a minority.

42 of the 63 are shorter than 44 pixels, the height named in WCAG 2.5.5, Target Size (Enhanced). The shortest is 21px. Height alone does not settle 2.5.5 — it is a AAA criterion about the whole target and it carries exceptions — so this is not a compliance finding and is not offered as one. What it settles is narrower and stranger: the number the profession quotes as the accessible size is not the size most of the systems teaching accessibility actually ship.

What it still cannot do

It has no pending state. There is no attribute for “this button has been pressed and the answer has not come back”. Every implementation invents one out of disabled, a class and a spinner, which is why so many of them let you buy two of something — the failure the feedback bench lets you produce yourself.

It cannot be styled without being un-styled first. appearance: none remains the opening line of almost every button rule, thirty years after the control shipped. The system look is not a default anyone can take; it is a thing to be removed.

It cannot contain another control. Interactive elements do not nest, so the very common “card with a button in it, and the whole card is clickable” has no valid markup and is built out of overlapping absolute positioning every time.

Nobody agrees what it is called. Eight systems ship one and the census finds 391 distinct component names between them, of which 325 appear in exactly one system.