Button
A label on a dithered hairline, and one solid block for the thing a page is for.
States
-
Text, at rest
nothing set
The label on a dithered hairline, in ink.
-
Text, hot
hover or :focus-visible
The hairline develops in --state from the pointer; with a mouse the label turns --state too.
-
Text, disabled
disabled
Muted, and nothing develops.
-
Solid, at rest
nothing set
An ink block; its cell split off by a hairline.
-
Solid, hot
hover or :focus-visible
The cell fires and --state burns across the block from it.
-
Small
.sh-button--sm
32px tall, for a control inside a denser row.
Anatomy
| Height | 40px (--control); 32px small (--control-sm) |
|---|---|
| Label | the label voice: Basier Square Medium, 11/16, uppercase, 0.08em |
| Text: rest | the label on a dithered hairline, 2px of ink to 1px of paper at 55% |
| Text: hover | a flare under the pointer (280ms) and the hairline develops in --state both ways in 140ms; retracts in 100ms |
| Solid | one ink block: the label, a --chip-fg hairline, a 40px cell with a pixel glyph |
| Solid: label | one module either side, less the 0.08em its tracking leaves after the last letter |
| Solid: hover | the cell fires and --state burns across the whole block from it in 160ms (--duration-burn); the label flips to --state-fg |
| How many | one solid button per view, for the thing the page is for |
| Reduced motion | the hairline and the burn land at once; nothing fires |
Timings are read from the engine at build time (rule.ts, ui.ts), not typed in here.
Decisions
-
Text on a hairline
The text button is the prose link’s grammar at control size. It replaced the outlined line button, a frame round one item.
-
Solid for one thing
One solid button per view, for what the page is for: “Contact me”, “Back to home”. Everything else is text.
-
Label centred
The solid label had 16px on the left and 24px on the right, which pushed the text against the edge and sat off the module. It now has a module each side, less its trailing tracking.
-
Snappier rule
The hairline developed in about 260ms. It was sped up to 140ms to match the component system, faster and more luminant, like the cursor firing.