OnlineIn review
Status
A lamp with words: the state line in tables, panel heads and lists. The words carry the meaning; the lamp is the glance.
Kit part · Badges & tags · Loaders
Lamp
The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.
- Element
- <span>
- Needs
- kit.css
- Rules
- lamp.rules.md · 4
- Finishes
- Aluminium · Graphite · Porcelain · Black
- Volumes
- Tactile · Quiet
Variants
Online
Live
Office · off
Synced with the desk
Standby
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 | Off | On | Blinking |
|---|---|---|---|
| Green | |||
| Amber | |||
| Red | |||
| Blue | |||
| White |
Graphite
| Part | Off | On | Blinking |
|---|---|---|---|
| Green | |||
| Amber | |||
| Red | |||
| Blue | |||
| White |
API
| Name | Kind | Values | What it does |
|---|---|---|---|
| .tui-lamp | class | on <span> | A 7px lamp. Off, it is a dim cap you can still see. |
| data-lamp | attribute | green (default) · amber · red · blue · white | Its colour: on/healthy, waiting/working, recording/failing, linked/for information, standing by/powered. |
| data-on · .is-on | attribute / class | — | Lit: the colour, a hot spot and a glow. |
| data-blink | attribute | — | 1.2s on/off, stepped. Only for states that need attention now. Stops under reduced motion. |
| .tui-status | class | on <span> | A lamp and printed words, 8px apart, in --tui-ink-2. |
| --c | CSS property | set by data-lamp | The lamp colour. Leave it to data-lamp; lamps have five colours. |
Markup
<span class="tui-lamp" data-on></span>
<span class="tui-lamp" data-lamp="amber" data-on data-blink></span>
<span class="tui-status">
<span class="tui-lamp" data-on></span>All systems normal
</span>Needs kit.css only, no script. How to install the kit.
Accessibility
- A lamp says nothing to a screen reader. The words beside it carry the state.
- Blinking stops under
prefers-reduced-motion; the lamp stays lit. - The five colours differ in lightness as well as hue, and never appear without words. White is the one a colour-blind eye can always tell apart; it still sits next to words.
How it’s built
A 7px circle. Off: the lamp colour mixed 22% into the plate’s dark tone, with an inset shadow, so you can see the unlit lens. On: the full colour under a small white hot spot, and two soft glows. Blink is a stepped animation. The lamp tokens (--tui-green, --tui-amber, --tui-red, --tui-blue and --tui-white) are the only hues in the kit. The blue is an indicator LED’s, not a brand’s; the white is a cold LED, not the warm filament of a bulb.
Rules
lamp.rules.mdIn the brain
A lamp always sits next to words; it is never the only signal.
4 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.