Icon key
A key with an icon and no words, square or round: transport, power, the small tools. Its aria-label names it; a tip shows the name.
Kit part · Buttons
Key
Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed.
- Element
- <button> · <a>
- Needs
- kit.css
- Rules
- key.rules.md · 6
- Finishes
- Aluminium · Graphite · Porcelain · Black
- Volumes
- Tactile · Quiet
Variants
Every state, at once
Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.
Aluminium
| Part | Rest | Hover | Pressed | Latched | Focus | Disabled |
|---|---|---|---|---|---|---|
| Key | ||||||
| Contrast | ||||||
| Flat | — |
Graphite
| Part | Rest | Hover | Pressed | Latched | Focus | Disabled |
|---|---|---|---|---|---|---|
| Key | ||||||
| Contrast | ||||||
| Flat | — |
API
| Name | Kind | Values | What it does |
|---|---|---|---|
| .tui-key | class | — | A plain key: a raised cap on a 2px skirt, 36px tall. |
| .tui-key--primary | class | — | The contrast cap: the one action on a surface that matters most. |
| .tui-key--flat | class | — | No cap at all: printed text that acts. For backing out. |
| .tui-key--danger | class | — | Red printing on a plain cap, for destructive actions. |
| .tui-key--sm · --lg | class | 28px · 46px | Small in tables and panel heads; large in heroes. Skirts scale with the cap: 1.5px, 3px. |
| .tui-key--icon · --round | class | — | Keys with an icon and no words: see the icon key. |
| aria-pressed | attribute | "true" · "false" | A latching key. “true” holds it down below the plate. |
| disabled · aria-disabled | attribute | — | 45% opacity and no travel. Use aria-disabled="true" on links. |
| data-tip | attribute | text | A one-line name shown on hover and focus. Required on icon keys, with an aria-label. |
| --h · --skirt | CSS property | 36px · 2px | Cap height and skirt depth. The size modifiers set both. |
| .is-hover · .is-down · .is-focus | class | — | Forced states, for documentation and specimens only. |
| Enter · Space | keyboard | — | Native button behaviour. The key presses on :active, so it drops under a finger, a mouse or a key. |
Markup
<button class="tui-key tui-key--primary">Start recording</button>
<button class="tui-key">Save preset</button>
<button class="tui-key" aria-pressed="false">
<span class="tui-lamp" data-on></span>Monitor
</button>
<button class="tui-key tui-key--flat">Cancel</button>Needs kit.css only, no script. How to install the kit.
Accessibility
- Use a real
<button>, or an<a>for navigation. Both are reached with Tab and keep the 2px focus ring, 3px away. - Icon keys need an
aria-label; thedata-tipis only for sighted pointer and keyboard users. - A latching key announces its state through
aria-pressed. The lamp in its cap is a second signal, never the only one. - The contrast cap holds 13:1 or better against its printing in both finishes.
How it’s built
Two backgrounds and a stack of box-shadows, no images. The cap is a linear gradient of --tui-face-hi under a radial highlight from above; the skirt is a hard 2px shadow in --tui-skirt, with a contact shadow and a soft one below it. Pressing moves the cap down by exactly the skirt and swaps the shadows for --tui-pressed: the plate’s edge now shades the cap’s top and sides. 70ms, one easing curve.
Rules
key.rules.mdIn the brain
One contrast key per surface. The label says what happens: “Erase reel”, not “Submit”.
6 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.