Empty State
A placeholder shown when there is no content to display.
No devices yet
Add your first device to start tracking energy.
Usage
import {
EmptyState,
EmptyStateActions,
EmptyStateDescription,
EmptyStateTitle,
} from '@epilot/spark-ui/empty-state'<EmptyState>
<EmptyStateTitle>No devices yet</EmptyStateTitle>
<EmptyStateDescription>
Add your first device to start tracking energy.
</EmptyStateDescription>
</EmptyState>Every empty state needs an EmptyStateTitle.
Examples
With an icon
Inbox zero
You're all caught up.
With an action
Pair with a primary action to give users a clear next step.
No devices yet
Add your first device to start tracking energy.
Ghost
variant="ghost" drops the dashed box for contexts that already have their own
chrome (a chat thread, a panel, a dialog body).
Ask me anything
I can look up your contracts, invoices and meter readings.
Size and layout
The default box is made for a whole empty page or table. When a single block
runs out of data, use size="sm" for a tighter box, layout="inline" to put
the icon beside the text, or both. Pick by how dense the surrounding block is.
The inline action sits on its own line under the text.
No devices yet
Add your first device to start tracking energy.
No devices yet
Add your first device to start tracking energy.
No devices yet
Add your first device to start tracking energy.
No devices yet
Add your first device to start tracking energy.
API Reference
EmptyState
| Prop | Type | Default |
|---|---|---|
icon | SparkIcon | — |
variant | 'dashed' | 'ghost' | 'dashed' |
size | 'default' | 'sm' | 'default' |
layout | 'stacked' | 'inline' | 'stacked' |
Renders a div holding the icon and its children. Forwards all div HTML attributes plus className.
EmptyStateTitle
Renders an h3 sized by the root's size. Forwards all heading HTML attributes plus className.
EmptyStateDescription
Renders a p sized by the root's size. Forwards all paragraph HTML attributes plus className.
EmptyStateActions
A row for one or more buttons, spaced under the text and centered in the stacked layout. Renders a div and forwards HTML attributes plus className.