# 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 · Free · https://tactileui.dev/parts/lamp

- Element: `<span>`
- Needs: `kit.css` only, no script ([how to install the kit](https://tactileui.dev/docs/installation#the-kit))
- Categories: Badges & tags, Loaders
- Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED
- Volumes: Tactile, Quiet

## Variants

### Status line

```html
<span class="tui-status"><span class="tui-lamp" data-on></span>Online</span>
```

### In a tag

```html
<span class="tui-tag"><span class="tui-lamp" data-on></span>Live</span>
```

### In a key cap

```html
<button class="tui-key"><span class="tui-lamp" data-on></span>Monitor</button>
```

### Off · still visible

```html
<span class="tui-status"><span class="tui-lamp"></span>Office · off</span>
```

### Blue · linked

```html
<span class="tui-status"><span class="tui-lamp" data-lamp="blue" data-on></span>Synced with the desk</span>
```

### White · standing by

```html
<span class="tui-status"><span class="tui-lamp" data-lamp="white" data-on></span>Standby</span>
```

## Every state

- Off
- On
- Blinking

Hover, pressed and focus are forced with `.is-hover`, `.is-down` and `.is-focus`; checked and disabled are real.

## API

| Name | Kind | Values | What it does |
| - | - | - | - |
| .tui-lamp | class | on | 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 | 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

```html
<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>
```

The demo on the page:

```html
<div style="display:grid;gap:22px;justify-items:start">
  <div style="display:flex;gap:26px;flex-wrap:wrap"><span class="tui-status"><span class="tui-lamp" data-on></span>All systems normal</span><span class="tui-status"><span class="tui-lamp" data-lamp="amber" data-on data-blink></span>Charging at 1.9 kW</span><span class="tui-status"><span class="tui-lamp" data-lamp="red" data-on></span>Recording</span><span class="tui-status"><span class="tui-lamp" data-lamp="blue" data-on></span>Linked to Studio B</span><span class="tui-status"><span class="tui-lamp" data-lamp="white" data-on></span>Standing by</span></div>
  <label class="tui-choice">Inverter <input type="checkbox" class="tui-switch" checked data-lamp-switch="#demo-lamp"></label>
  <span class="tui-status" id="demo-lamp" data-on-text="Inverter online" data-off-text="Inverter off"><span class="tui-lamp" data-on></span><span>Inverter online</span></span>
</div>
```

## Usage notes

Flip the switch: the lamp and its words change together.

## 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

A lamp always sits next to words; it is never the only signal.

The full rules are in `lamp.rules.md` in the brain, which ships with the Kit.

## Related parts

- [Status](https://tactileui.dev/parts/status): A lamp with words: the state line in tables, panel heads and lists. The words carry the meaning; the lamp is the glance.
- [Tag](https://tactileui.dev/parts/tag): A small printed plate: a type, a count, a badge. Solid for the one tag that must stand out.
- [Toast](https://tactileui.dev/parts/toast): A confirmation after an action: a small plate with a lamp and one factual sentence, read out politely, gone in 3.6 seconds.