Key
Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed.
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.
- Element
- <button>
- 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 |
|---|---|---|---|---|---|---|
| Square | ||||||
| Round |
Graphite
| Part | Rest | Hover | Pressed | Latched | Focus | Disabled |
|---|---|---|---|---|---|---|
| Square | ||||||
| Round |
API
| Name | Kind | Values | What it does |
|---|---|---|---|
| .tui-key--icon | class | with .tui-key | Square: as wide as it is tall, no padding. |
| .tui-key--round | class | — | A round cap, for power and transport. |
| aria-label | attribute | required | The key’s name. Screen readers read this, not the icon. |
| data-tip | attribute | same words | The name, printed above on hover and focus. |
| aria-pressed | attribute | "true" · "false" | For latching keys, like power. |
| svg | element | 16 × 16 | Any icon drawn in currentColor, marked aria-hidden. |
| --sm · --lg | class | 28px · 46px | Sizes, as for any key. |
Markup
<button class="tui-key tui-key--icon" aria-label="Play" data-tip="Play">
<svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M5 3.5v9l7-4.5z"/></svg>
</button>
<button class="tui-key tui-key--icon tui-key--round" aria-label="Power" data-tip="Power" aria-pressed="false">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">…</svg>
</button>Needs kit.css only, no script. How to install the kit.
Accessibility
- The
aria-labelis required: an icon has no name of its own. - The tip shows on keyboard focus as well as hover. On touch there is no hover, so use icons people already know.
- Put
aria-hidden="true"on the SVG so the name is read once.
How it’s built
A key with width: var(--h) and no padding, so the cap is square at every size; round is a 999px radius on the same cap and skirt. The icon is an inline SVG in currentColor, so it prints in the key’s ink in both finishes.
Rules
key.rules.mdIn the brain
Icon keys need an aria-label and a data-tip.
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.