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

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

## Variants

### In a panel head

```html
<div class="tui-panel" style="width:220px;padding:14px"><div class="tui-panel__head" style="margin:0;padding-bottom:8px"><span class="tui-label">Inverter</span><span class="tui-status"><span class="tui-lamp" data-on></span>Online</span></div></div>
```

### Working

```html
<span class="tui-status"><span class="tui-lamp" data-lamp="amber" data-on data-blink></span>Charging at 1.9 kW</span>
```

### Off

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

## Every state

- On
- Waiting
- Failing
- Linked
- Standing by
- Off
- Needs attention

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-status | class | on | 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

```html
<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:20px;justify-items:start;width:min(100%,380px)">
  <label class="tui-choice">Inverter <input type="checkbox" class="tui-switch" checked data-lamp-switch="#demo-status"></label>
  <span class="tui-status" id="demo-status" data-on-text="Inverter online" data-off-text="Inverter off"><span class="tui-lamp" data-on></span><span>Inverter online</span></span>
  <table class="tui-table"><tbody><tr><td>Harbour survey</td><td><span class="tui-status"><span class="tui-lamp" data-on></span>Mixed</span></td></tr><tr><td>Common Comb ident</td><td><span class="tui-status"><span class="tui-lamp" data-lamp="amber" data-on></span>In review</span></td></tr><tr><td>Lode, reel 3</td><td><span class="tui-status"><span class="tui-lamp" data-lamp="red" data-on></span>Recording</span></td></tr></tbody></table>
</div>
```

## Usage notes

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

## 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, centred on its text line: a kit lamp first, then the words, with `--tui-2` between them. The words are in the small size and the second ink. It has no plate, border or script: the lamp is the whole of its light, so the words must say what the lamp shows.

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

- [Lamp](https://tactileui.dev/parts/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.
- [Table](https://tactileui.dev/parts/table): Rows of data with printed column labels, figures right-aligned in columns, and status in lamps with words.
- [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.