Stable
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.
No meter reads yet
Reads appear here once tenants submit them.
Specifications
Anatomy
No meter reads yet
Reads appear here once tenants submit them.
Anatomy
No meter reads yet
Reads appear here once tenants submit them.
Size and spacing
Nothing here yet
With action
When the manager can fill it: book, request, connect.
Example
No inspections booked
Book one to remind the tenant automatically.
Example
No inspections booked
Book one to remind the tenant automatically.
Message only
When content arrives on its own, or a search or filter found nothing.
Example
No results for "Ashby"
Check the spelling or clear the filter.
Example
No results for "Ashby"
Check the spelling or clear the filter.
Usage
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
No meter reads yet
Reads appear here once tenants submit them.
Oops!
Nothing to see here.
Do
- Explain why it is empty and offer the next step.
Don't
- Show a blank table with headers only.
Implementation
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 used
--at-border, --at-text-subtle, --at-text
Accessibility
- Plain text, no images needed.