Empty state
Usage
What a list, table or panel shows when it has nothing in it. Three distinct situations wear this component: nothing created yet, nothing matched a filter, and something failed. They need different copy and different actions — an empty state that says "No results" when the user has simply not created anything yet is a dead end.import { Emptystate } from '@summonware/ui';Best practices
DoGive first-run states an action that creates the first item. That is the whole point of the component.
DoFor a filtered-to-nothing state, offer to clear the filter rather than to create something.
Don'tUse the same copy for "nothing yet" and "nothing matched". They are different problems.
Don'tLeave an error state without a retry. "Something went wrong" with no way forward is the worst version of this component.
Anatomy
IconGlyph in a tinted circle. Defaults to a neutral ring.
Title *One short line naming the situation.
DescriptionA sentence explaining what will appear here, or what to do.
ActionThe way out. Usually a single button.
Examples
Common configurations, variations and states.Nothing yet
Your inbox is empty
Messages you receive will appear here.
The first-run case. The action creates the first item, so the state teaches the feature rather than just reporting absence.
No results
No orders match those filters
Try widening the date range or clearing the status filter.
A filter matched nothing. The action clears the filter — offering "create" here would be answering a question nobody asked.
Compact
No notifications
You are all caught up.
The `sm` size, for an empty region inside a card where the full-size treatment would dominate.
Reference variants
5 of 9 labels from the reference are demonstrated above.Empty InboxFirst-time UseNo Search ResultsNo Data AvailableSmall VariantEmpty CartNo NotificationsUpload NeededError State