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 } from '@epilot/spark-ui/empty-state'
<EmptyState
  title="No devices yet"
  description="Add your first device to start tracking energy."
/>

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.

API Reference

PropTypeDefault
titlestring
descriptionstring
iconMaterialSymbolIconName
actionReact.ReactNode
variant'dashed' | 'ghost''dashed'

On this page