One height, stock weight, one ring — ink for the decision, outline for the workhorse.
Accent UI's baseline control, and the place its rules are easiest to see: one height, stock weight, one ring.
<button type="button" class="btn btn-outline-secondary">Rename…</button>
That is the whole idiom. btn-sm is a no-op — every button resolves to
the app's one control height, which is the small size: the admin had
already written btn-sm on five of every six buttons, so the skin made
the app's density official and retired the suffix.
| Variant | Job |
|---|---|
btn-primary |
The highest-priority action — publish, save, create; at most one per surface. A solid fill in the accent blue: the app's own voice, spent on the thing it most wants you to do. |
btn-outline-secondary |
The workhorse neutral. An ink outline, correct on any ground; hover raises the border and washes 5% ink — no colour flip, because hovering is not a state worth spending colour on. |
btn-link |
Navigation wearing a button's box. Keeps the link voice — normal weight, no border — for toolbar and tree text that routes rather than acts. |
btn-danger |
Destructive. Red ink on an outline rather than a red slab — the quiet app announces danger, it does not shout it. |
Anything not in the table is not part of the vocabulary. In particular there is no styled secondary-solid, no info, no warning — a surface that feels it needs one is usually spending colour on decoration.
aria-expanded="true") wears the soft accent tint on outline
and light variants — the control whose menu is open is in a
state, and colour says so. Solid variants keep their ground.fw-* classes — weight is not a knob.py-* / px-* / shadow-* on a button — utilities are
!important and fork the density.