Empty State
Overview
Usage
Examples
API
<rhombus-empty-state> is a centered icon, heading, optional body, and optional CTA for “nothing here yet” states. The icon is a Material ligature name and the CTA composes <rhombus-button>, so it inherits the token contract and re-skins with the theme.
Example
No drafts yet
Start writing — your first post is one click away.
When to use
- Reach for it when a list, column, or search result has no items to show — give the user a reason and, where there's a next step, a CTA.
- It nests cleanly inside a Data Table's empty slot to explain why a table has no rows.
When not to use
- For a transient “action succeeded / failed” message, use a Toast — empty state describes a persistent absence, not an event.
- For an inline warning or informational banner inside otherwise populated content, use an Alert.
- For a loading placeholder while data is in flight, use Progress rather than an empty state.
Related components
- Data Table — the most common host for an empty state.
- Card — a framed surface that often wraps an empty state.
- Button — powers the optional CTA.
Was this page helpful?