Empty state
A composable zero-state layout for empty lists, no-results searches, and first-run screens.
With action
Icon, title, description, and a primary call to action.
No sensors yet
Connect your first sensor to start tracking consumption, cost, and emissions across your sites.
No search results
The zero-results state for a filtered or searched list.
No results for “substation-9”
Try a different search term or clear the current filters to see all sensors.
In a data table
Composed inside a table frame as its zero-state — the recommended pattern for data components.
SensorSiteReading
No readings in this range
No sensor readings were recorded for the selected period. Import a file or widen the date range.
API reference
An empty-state placeholder: a dashed-border container with a header (media, title, description) and a content area for actions.
Anatomy
Empty | Centered dashed-border container for the empty state. |
EmptyHeader | Centered column grouping media, title, and description. |
EmptyMedia | Icon or media holder with a variant style. |
EmptyTitle | The empty-state heading text. |
EmptyDescription | Muted paragraph describing the empty state. |
EmptyContent | Column area for actions or supplementary content. |
Props
| Part | Prop | Type | Default | Description |
|---|---|---|---|---|
EmptyMedia | variant | "default" | "icon" | "icon" | Media style — bare or a rounded muted icon tile. |