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.
Kit part · Badges & tags
Status
A lamp with words: the state line in tables, panel heads and lists. The words carry the meaning; the lamp is the glance.
- Element
- <span>
- Needs
- kit.css
- Rules
- lamp.rules.md · 4
- Finishes
- Aluminium · Graphite · Porcelain · Black
- Volumes
- Tactile · Quiet
Variants
InverterOnline
Charging at 1.9 kW
Office · off
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 | On | Waiting | Failing | Linked | Standing by | Off | Needs attention |
|---|---|---|---|---|---|---|---|
| Status | Online | Queued | Down | Synced | Standby | Off | Low disk |
Graphite
| Part | On | Waiting | Failing | Linked | Standing by | Off | Needs attention |
|---|---|---|---|---|---|---|---|
| Status | Online | Queued | Down | Synced | Standby | Off | Low disk |
API
| Name | Kind | Values | What it does |
|---|---|---|---|
| .tui-status | class | on <span> | A lamp and printed words, 8px apart, 12px, in --tui-ink-2. |
| .tui-lamp | element | first child | Any lamp: colour (green · amber · red · blue · white), on, blink. |
Markup
<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
- The words are the state for screen readers; keep them specific: “Waiting for 2 kW spare”, not “Pending”.
- In a table, give it its own column with a header, so it is read with the row.
How it’s built
An inline flex row: a kit lamp and a line of text. It needs to be nothing more.
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.