Empty
The state a list is in with nothing to show.
Usage
Everything but Root is optional. A bare Root > Title is a legitimate empty state.
No projects yet
Projects you create will show up here.
With actions
Media is aria-hidden and that is the point: whatever
goes in it — an icon, an illustration — restates the title underneath. Left in the accessibility
tree it either announces nothing or says the same thing twice.
No projects yet
Create your first project to get started.
Announcing the change
announce sets role="status", and it is off by
default on purpose. An empty state present on first paint is just the page — announcing it
interrupts a screen reader reading the heading above it. An empty state that replaces results after a search is a change the user caused and cannot see, and silence
there reads as "nothing happened".
So: on for anything that swaps in after an interaction, off for a first-render placeholder.
No matches for "svelt"
Try a shorter search term.
Titles are not headings
Title renders a <p> by default. An empty
state inside a card or a table cell has no section of its own, and injecting an <h3> there puts "No results" into the document outline — a
screen reader user navigating by heading would land on it as if it were part of the page. Pass level only when the surrounding structure genuinely warrants one.
No invoices
Props
Each part also takes its native element's attributes via prop spreading.
| Prop | Type | Default |
|---|---|---|
announce Announce this empty state when it appears. Default `false`, and that default is the interesting part. An empty state present on first paint is just the page — announcing it interrupts a screen reader reading the heading above it. An empty state that REPLACES results after a search or a filter is a change the user caused and cannot see, and silence there reads as "nothing happened". So: `announce` on anything that swaps in after an interaction, off for a first-render placeholder. | boolean | false |
class Extra classes merged onto the root element. | string | — |
children required | Snippet | — |
| Prop | Type | Default |
|---|---|---|
level Heading level, when this empty state sits under a heading that gives it context. Omit it and the title renders as a `<p>`. A heading is not the safe default: an empty state inside a card or a table cell would inject an `<h3>` into the document outline where no section exists, and a screen reader user navigating by heading would land on "No results" as if it were a part of the page. | 2 | 3 | 4 | 5 | 6 | — |
class Extra classes merged onto the element. | string | — |
children required | Snippet | — |
| Prop | Type | Default |
|---|---|---|
class Extra classes merged onto the element. | string | — |
children required | Snippet | — |
| Prop | Type | Default |
|---|---|---|
class Extra classes merged onto the element. | string | — |
children required | Snippet | — |
| Prop | Type | Default |
|---|---|---|
class Extra classes merged onto the element. | string | — |
children required | Snippet | — |