Components / Feedback
Empty State
stableWhat renders instead of a table, list, or grid when there is nothing to show yet. Every list-shaped component in this system has one.
With action
No Products Yet
When there are products, they will show here.
Without action
No Results Found
Try adjusting your filters.
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
icon | ReactNode | — | No | Optional icon in a circular badge. |
title | string | — | Yes | "No [Items] Yet" |
description | string | — | Yes | "When there are [items], they will show here." |
action | ReactNode | — | No | Optional call-to-action, e.g. a Button. |
Do
- Use the standard copy formula: "No [Items] Yet" + "When there are [items], they will show here."
- Include an action when there’s an obvious next step (e.g. "Add your first product").
- Design this state at the same time as the filled state, not after.
Don't
- Show a blank white box with no explanation.
- Use alarming iconography — an empty state is a normal, expected condition, not an error.