11Shipped
EmptyState
Editorial empty state. Empty is a brand moment, not an apology.
Import
import { EmptyState } from "@charply/design"Variants
With action
No saved replies yet
Generate a reply and save it to build your library.
Minimal
No posts found
Scroll the feed to load posts for the agent.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | Headline copy (required) | |
| description | string | Supporting copy (required) | |
| icon | ReactNode | Visual moment icon (required, use size-8) | |
| action | { label: string; onClick?: () => void } | Primary CTA |
Guidelines
docs/design/components/emptystate.mdDo
- ✓Write empty state titles as short sentences that explain the state in a friendly, direct tone.
- ✓Include an action when the user can do something to fill the state.
Don't
- ✗Use generic copy like "Nothing here" or "No data" — the copy should explain what the user can do.
- ✗Omit empty states entirely — zero-data views without guidance create confusion.
See all variants and interactive states in Storybook. Run npm run storybook to open the workbench.