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

Kit part · Free · https://tactileui.dev/parts/empty-state

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

## Variants

### Slots · a list or a table

```html
<div class="tui-empty" style="width:240px"><div class="tui-empty__outline" aria-hidden="true"><i></i><i></i><i></i></div><span class="tui-status"><span class="tui-lamp"></span>No takes on this reel</span><p class="tui-empty__text">Record, or drop audio files here.</p><button class="tui-key" type="button">Record the first take</button></div>
```

### A sheet · files and exports

```html
<div class="tui-empty" style="width:240px"><div class="tui-empty__outline tui-empty__outline--sheet" aria-hidden="true"></div><span class="tui-status"><span class="tui-lamp"></span>No bills yet</span><p class="tui-empty__text">Your first bill arrives on 1 October.</p><button class="tui-key" type="button">Add a past bill</button></div>
```

### A plot · a chart with no data

```html
<div class="tui-empty" style="width:240px"><div class="tui-empty__outline tui-empty__outline--plot" aria-hidden="true"></div><span class="tui-status"><span class="tui-lamp"></span>No readings today</span><p class="tui-empty__text">The meter has been quiet since 00:00.</p><button class="tui-key" type="button">Check the meter</button></div>
```

### Words only · nothing to add by hand

```html
<div class="tui-empty" style="width:240px"><div class="tui-empty__outline" aria-hidden="true"><i></i><i></i><i></i></div><span class="tui-status"><span class="tui-lamp"></span>No alerts this week</span><p class="tui-empty__text">The hub raises one when something needs you.</p></div>
```

## Every state

- Slots
- Sheet
- Plot
- Key focused

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-empty | class | on | The tray: the kit’s recess, 12px corners, everything centred. |
| .tui-empty__outline | class | aria-hidden="true" | The printed outline. By default a stack of dashed slots, one per , fading down. |
| .tui-empty__outline--sheet | class | — | A page with a turned corner and three printed lines: for files, bills, exports. |
| .tui-empty__outline--plot | class | — | Two axes and dashed gridlines: for a chart with no data. |
| .tui-status + an unlit .tui-lamp | class | the title | What is missing, as a noun phrase: “No circuits yet”. |
| .tui-empty__text | class | on | One sentence: what goes here and how it arrives. |
| .tui-key | element | one | The one action. It may be the contrast key if nothing else on the surface is. |
| .tui-empty--row · .tui-empty__words | class | — | Side by side, for a short tray under a table head; folds back to a column when narrow. |
| --line | CSS property | from --tui-ink-3 | The outline’s ink. Set by the part; read it for your own outlines. |

## Markup

```html
<div class="tui-empty">
  <div class="tui-empty__outline" aria-hidden="true"><i></i><i></i><i></i></div>
  <span class="tui-status"><span class="tui-lamp"></span>No circuits yet</span>
  <p class="tui-empty__text">Circuits appear here once the hub has seen them on the board.</p>
  <button class="tui-key tui-key--primary">Pair the hub</button>
</div>
```

The demo on the page:

```html
<div style="display:grid;gap:20px;width:min(100%,600px)">
  <div class="tui-panel"><div class="tui-panel__head"><h2 class="tui-label" style="margin:0">Circuits</h2><span class="tui-tag">0 of 12</span></div>
  <div class="tui-empty"><div class="tui-empty__outline" aria-hidden="true"><i></i><i></i><i></i></div><span class="tui-status"><span class="tui-lamp"></span>No circuits yet</span><p class="tui-empty__text">Circuits appear here once the hub has seen them on the board, usually within a minute of pairing.</p><button class="tui-key tui-key--primary" data-toast="Hold the hub’s button for three seconds." data-lamp="amber" type="button">Pair the hub</button></div>
  </div>
  <div class="tui-panel"><div class="tui-table-wrap"><table class="tui-table"><thead><tr><th scope="col">Schedule</th><th scope="col">Runs</th><th scope="col" class="is-num">Heat pump</th></tr></thead></table></div>
  <div class="tui-empty tui-empty--row" style="margin-top:12px"><div class="tui-empty__outline" aria-hidden="true"><i></i><i></i></div><div class="tui-empty__words"><span class="tui-status"><span class="tui-lamp"></span>No schedules</span><p class="tui-empty__text">Schedules run the heat pump at the hours you pick.</p></div><button class="tui-key" type="button" data-toast="New schedule: 06:30–08:00, weekdays.">Add a schedule</button></div>
  </div>
</div>
```

## Usage notes

The outline is printed where the first thing will sit, like the shape painted on a tool board.

## Accessibility

- The outline is `aria-hidden`: it is a picture of what is missing, and the title already says it.
- The unlit lamp is a second signal; the words “No circuits yet” carry the meaning.
- The key says what it does: “Pair the hub”, not “Get started”.
- Nothing moves, so there is nothing for reduced motion to take away.

## How it’s built

No script, no images. The tray is the kit’s recess; each slot is an `<i>` with a 1.5px dashed border in `--tui-ink-3` and a printed dot for where a lamp would sit, the lower ones fading the way a tool board’s outlines do toward the back. The sheet is one dashed box with its corner rounded wide and a second dashed corner drawn over it; the plot is two solid axes and two dashed gridlines from repeating gradients.

## Rules

Say what will be here and how it arrives, in one sentence, then give the one key that starts it.

The full rules are in `empty-state.rules.md` in the brain, which ships with the Kit.

## Related parts

- [Tray](https://tactileui.dev/parts/tray): A recess cut into the plate that holds other parts: keys, a selector, an empty state waiting for its first thing.
- [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.
- [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.