Empty
A blank space reads as a bug. An empty state says which space is blank, why, and what to do next — and it is the case most easily forgotten, because during development there is always data.
Basic empty state
No posts yet
Add a Markdown file to src/posts and it will appear here.
empty({
title: 'No posts yet',
description: 'Add a Markdown file to src/posts and it will appear here.',
})With an icon
The icon is decoration — it is marked aria-hidden, because the title already says what is going on.
Nothing here
This folder has no pages in it.
empty({
icon: icon('folder'),
title: 'Nothing here',
description: 'This folder has no pages in it.',
})With an action
Children become the action row.
empty({
icon: icon('search'),
title: 'No results for “islands”',
description: 'Check the spelling, or browse the documentation instead.',
},
button({ href: '/docs' }, 'Browse the docs'),
button({ variant: 'outline', color: 'neutral' }, 'Clear search'),
)In a card
Deploys
No deploys yet
Push to main and the first build will show up here.
card(
cardHeader({ title: 'Deploys' }),
cardBody(
empty({
title: 'No deploys yet',
description: 'Push to main and the first build will show up here.',
}, button({ size: 'sm' }, 'Connect a repository')),
),
)In place of a table
Swap the table for an empty state rather than rendering a header with no rows under it.
Build history
No builds recorded
Runs appear here once the site has been deployed at least once.
return (() => {
const rows = []
return card(
cardHeader({ title: 'Build history' }),
rows.length
? table({ columns: [{ key: 'commit', header: 'Commit' }], rows })
: cardBody(empty({
title: 'No builds recorded',
description: 'Runs appear here once the site has been deployed at least once.',
})),
)
})()Props
| Prop | Type | Default | Description |
|---|---|---|---|
icon | Child | — | Decorative glyph above the title; hidden from screen readers. |
title | Child | — | What is empty, in a few words. |
description | Child | — | Why it is empty, or what to do about it. |
Children render as the action row under the description.