Empty State
"No data yet" placeholder for list views, search results, filtered tables, dashboards, inbox-zero screens, and 404s. Compose: icon, title, supporting description, optional actions. Three sizes — --sm (inline, inside cards/tables), default (block-level), --lg (full-page).
a11y (built in): the icon is decoration (aria-hidden) — the <h3> title and <p> description carry the whole message, and the actions are real <button>/<a> elements with the system focus ring. --danger tints only the icon; title and description keep their normal colours, so the error never rides on colour alone. Pure CSS, no controller — an empty state swapped in after a user action needs the consumer's own live region to be announced.
Usage: <div class="lb-empty-state"> wraps __icon, __title, __description, and __actions slots. Title uses <h3> semantics by default; description as <p>.
Default
Block-level empty state with 48px icon, heading-s title, body description, action button(s).
Inbox zero
No new messages. You're all caught up — enjoy the quiet moment.
Small — inline (inside a card / table / widget)
Compact version for tight spaces. 32px icon, smaller title, reduced padding.
No results
Try adjusting your search terms.
Large — full-page / 404
For full-viewport empty states: 404, onboarding blanks, empty dashboards. 64px icon, heading-m title.
Page not found
We couldn't find that page. It may have been moved, renamed, or never existed. Let's get you back on track.
Without icon
Icon is optional — skip it for minimalism or when you want text to speak for itself.
Nothing scheduled
Your calendar is clear for the rest of the week.
Minimal — title only
Sometimes one line is enough (dense admin tables, sidebar widgets).
No activity this week
Onboarding — "Create your first"
First-run pattern. The user has zero of something and we want to nudge them into creating one. The icon stays muted, but the action is primary so the path forward is obvious.
No projects yet
Projects keep your work organised. Create one to start tracking issues, designs, and milestones.
Filtered to nothing
Different from "no data ever exists" — the user HAS data, but their current filter excludes it all. The action helps them recover by relaxing the filter rather than starting from scratch.
No matches for these filters
Try removing one of the active filters or broadening your search.
Error — failed to load
Add --danger when the empty state is actually an error (network failure, permission denied, server down). The icon tints red to read as risky; title + description stay neutral so the headline doesn't shout.
Couldn't load your data
The server didn't respond in time. Check your connection and try again — your work hasn't been lost.
Inside a Card
Dashboard widget where the card owns the frame.
No data in this period
Analytics will appear here once events start flowing.