# Empty state

Status: stable

What to show when there is nothing to show yet.

Empty states fill the space where content will appear once there is some: no readings yet, no inspections booked. They say why it is empty and, where possible, offer the action that fills it.

An empty state is not an error. If something failed to load, use an error alert instead.

## Example

```html
<div class="at-empty"><p class="at-empty__title">No meter reads yet</p><p>Reads appear here once tenants submit them.</p><button type="button" class="at-button at-button--primary">Request reads</button></div>
```

## Anatomy

1. **Title**: color: var(--at-text); font-weight: var(--at-weight-bold); margin-bottom: var(--at-space-2) /* 4px */

2. **Message**: color: var(--at-text-subtle); one sentence on why it is empty

3. **Action (optional)**: usually one .at-button--primary

4. **Container**: border: 1px dashed var(--at-border); border-radius: var(--at-radius-2) /* 10px */; text-align: center

## Size and spacing

- **Padding**: block: var(--at-space-7) /* 32px */; inline: var(--at-space-5) /* 16px */

- **Width**: fills the space the content would take

## Variants

### With action

When the manager can fill it: book, request, connect.

```html
<div class="at-empty"><p class="at-empty__title">No inspections booked</p><p>Book one to remind the tenant automatically.</p><button type="button" class="at-button at-button--primary">Book inspection</button></div>
```

### Message only

When content arrives on its own, or a search or filter found nothing.

```html
<div class="at-empty"><p class="at-empty__title">No results for "Ashby"</p><p>Check the spelling or clear the filter.</p></div>
```

## When to use

- A list or table with no rows yet.
- A search or filter with no results.

## When not to use

- Something failed to load: use an error alert.
- While loading: use a spinner or skeleton.

## Content

- Title says what is missing: "No meter reads yet".
- Message says why, or what will make content appear.
- Keep it calm and short: no jokes or illustrations needed.

## Do and don't

Do: Says what is missing and when it will appear.

```html
<div class="at-empty"><p class="at-empty__title">No meter reads yet</p><p>Reads appear here once tenants submit them.</p></div>
```

Don't: Sounds like an error and does not help.

```html
<div class="at-empty"><p class="at-empty__title">Oops!</p><p>Nothing to see here.</p></div>
```

## Do

- Explain why it is empty and offer the next step.

## Don't

- Show a blank table with headers only.

## Code

```html
<div class="at-empty">
  <p class="at-empty__title">No meter reads yet</p>
  <p>Reads appear here once tenants submit them.</p>
  <button type="button" class="at-button at-button--primary">Request reads</button>
</div>
```

## Classes

| Class | What it does |

|---|---|

| `at-empty` | Dashed, centred box |

| `at-empty__title` | Bold first line |

## Tokens

`--at-border`, `--at-text-subtle`, `--at-text`

## Accessibility

- Plain text, no images needed.