` - Needs: `kit.css` and `kit.mjs` ([how to install the kit](https://tactileui.dev/docs/installation#the-kit)) - Covers: Error state, Load failed - Categories: Empty states - Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED - Volumes: Tactile, Quiet ## Variants ### Slots · a list ```html

The invoices did not load

The server took too long to answer. Nothing was lost.

``` ### A sheet · a file or a report ```html

The report would not open

The file may have moved. Check the link, or ask whoever shared it.

``` ### A plot · a chart ```html

The chart did not load

The readings are safe. They are just not reachable right now.

``` ### With a way round it ```html

You are offline

Changes stay on this device until you are back online.

Keep working offline

``` ### Nothing to retry · the page is gone ```html

This project no longer exists

It was deleted by its owner on 2 October.

Back to projects

``` ### Retrying · lamp amber ```html

The invoices did not load

The server took too long to answer. Nothing was lost.

``` ### Side by side · .tui-empty--row ```html

The schedules did not load

Nothing was changed.

The invoices did not load

The server took too long to answer. Nothing was lost.

Check the status page

``` ```js import { setRetrying } from '/kit/kit.mjs'; // wires every [data-error-retry] tray.addEventListener('tui-error-retry', async () => { // The key is already held and the lamp amber. try { show(await load()); } // success: replace the tray with the view catch { setRetrying(tray, false, 'Still not loading.'); } // failure: put the key back, say so }); ``` The demo on the page: ```html

Invoices · Northwind

The invoices did not load

The server took too long to answer. Nothing was lost, and your drafts are safe.

Reference LD-4417

Check the status page

``` ## Usage notes Press Retry: the key holds, the lamp goes amber and the page says it is trying. The first try fails again; the second loads the list. The key keeps the focus the whole time. ## Accessibility - The title is a heading, so a screen reader user can find what failed from the heading list. The words say what happened; the red lamp is hidden from a screen reader and is only a second sign. - Use `role="alert"` only when the failure appears after an action, such as a save, so it interrupts. A view that fails on load is simply read in its place. - Tab reaches Retry and Enter or Space presses it. Retry keeps the focus. The key is `aria-disabled`, not `disabled`, while it works, so the person is not thrown out of it, and the polite status region says “Retrying” and, if it fails again, what you tell it to. - The key says what it does: “Retry”, or “Check again” when the cause is the connection. A way round is a link or a flat key with its own words, never a bare “Learn more”. - The lamp turns amber and blinks while retrying; the blink stops under reduced motion and the lamp stays lit amber. Keys are 44px on a phone and the tray never scrolls sideways. ## How it’s built No new tray. It is `.tui-empty` with a lit lamp and an added row for the keys, so the recess, the printed outline and the way each finish draws them are the empty state’s own. The held key is the kit’s `aria-disabled` key with its words swapped by about thirty lines of script, and the lamp turns amber because the tray says `aria-busy`, which is also what a screen reader hears. ## Rules Say what failed in plain words, say whether anything is lost, and give the one key that tries again. The full rules are in `error-state.rules.md` in the brain, which ships with the Kit. ## Related parts - [Empty state](https://tactileui.dev/parts/empty-state): What a view shows before it has anything: an empty tray with the outline of what goes in it printed on its floor, one sentence and one key. - [Alert](https://tactileui.dev/parts/alert): A message let into the surface, with an annunciator: a small lit legend (Note, Done, Check, Fault) beside the words that say what happened. - [Key](https://tactileui.dev/parts/key): Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed.