Helpful empty state
An empty state that explains why the page is empty and gives one relevant next action.
When this template fits
This empty state is for a collection that is valid but does not contain any items yet. It explains the condition and offers one relevant action, instead of treating an expected first-use state as an error.
How the layout works
A decorative icon, direct heading, short explanation, and single action create a compact reading order. The card remains centered without using a fixed height, so translated text and browser zoom can expand it safely.
What to customize
Name the missing object precisely, explain whether data was filtered or has never been created, and choose an action that resolves that exact state. For empty search results, preserve the user query and offer a way to clear filters.
Review before publishing
Make sure the icon is hidden from assistive technology, the action label describes its result, and the message does not blame the user. Do not use an empty state to conceal a loading failure, permission problem, or server error.
Keep building with context
Compare a related pattern or read a practical guide before adapting this example in the Playground.