Ghost empty
The shape of the data that is not there yet, blurred, with a short hint on top. For one dashboard panel among many.
When to use it
Zoho’s dashboard cards do this when a period has no sales. The card keeps its working size, so the grid does not collapse and jump when data arrives, and the ghost says what the card will show. Pick the kind that matches the chart the panel draws when it has data. For a whole empty list or screen use EmptyState instead.
Each kind, inside a card
Sales by month
kind="bars"
No sales recorded during this period.
Stock value
kind="line"
No stock movements yet this quarter.
Stock by category
kind="donut"
No items are stocked in Chakan plant store.
Top customers
kind="list"
No invoices raised this month.
Top-selling items
kind="cards"
Nothing sold in the last 30 days.
With an action
Only when the action really fixes it, such as recording the first receipt.
Receipts this week
No goods received at Bhosari main store this week.
Options
Everything you can pass to Ghost empty.
| Prop | Type | Default | What it does |
|---|---|---|---|
| message | ReactNode | — | One sentence: what is missing and for which period. |
| kind | 'bars' | 'line' | 'list' | 'cards' | 'donut' | 'bars' | The chart the panel shows when it has data. |
| height | number | 180 | The panel’s working height, so the grid does not jump. |
| action | ReactNode | — | A small button under the hint. |