` - Needs: `kit.css` and `kit.mjs` ([how to install the kit](https://tactileui.dev/docs/installation#the-kit)) - Categories: Alerts, Notifications - Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED - Volumes: Tactile, Quiet ## Variants ### Fault · with a key ```html

Fault

Backup failed. The disk is full.

``` ### Check · dismissable ```html

Check

Disk 82% full.

``` ### Done ```html

Done

Backup finished at 02:14.

``` ### Note · words only ```html

Note

Backups run nightly at 02:00.

``` ### Fault that needs you now · blinking ```html

Fault

Smoke in the loft.

Fault

The inverter stopped answering at 14:02. The house is on the grid until it restarts.

``` ```js import '/kit/kit.mjs'; // wires every [data-alert-dismiss] document.addEventListener('tui-alert-dismiss', (e) => remember(e.target.id)); // From a script: import { dismissAlert } from '/kit/kit.mjs'; dismissAlert(document.querySelector('#inverter-fault')); ``` The demo on the page: ```html

Fault

The inverter stopped answering at 14:02. The house is on the grid until it restarts.

Check

The export limit is 3.68 kW. Above it the inverter throttles the panels.

Done

Firmware 4.2 installed. The hub restarted at 02:04 and kept every schedule.

Note

Readings are kept for 13 months, then summed into monthly totals.

``` ## Usage notes Every kind at once. The keys work; the × lets a message go and moves focus on to the next thing. ## Accessibility - Colour is never alone: the legend is a word, and the text says what happened. The red legend is lifted toward white to read at 4.5:1 on its glass. - Use `role="alert"` only for a fault that appears while someone is working, so it interrupts; `role="status"` is read politely. - After a dismiss, focus moves to the next focusable element on the page, never to the top of the document. - The × key has an `aria-label`; the tip repeats it for pointer and keyboard users. ## How it’s built The window is the kit’s recess. The annunciator is a 24px strip of display glass (the VFD background, an inset shadow, a faint glare) with the word in Geist Mono lit by `--lit` and a two-step glow; a radial wash of the same light sits behind it, the way a lamp shows through printed film. `data-alert` only sets `--lit`. The dismiss is fifteen lines in `alert.mjs`, delegated from the document, so alerts added later work too. ## Rules The legend lights; the words carry the meaning. A fault says what to do about it, and an alert that needs action never leaves by itself. The full rules are in `alert.rules.md` in the brain, which ships with the Kit. ## Related parts - [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. - [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. - [Dialog](https://tactileui.dev/parts/dialog): A decision that must be made now: a native dialog with a question, one sentence of consequence, a way back and the act.