Empty state
Fills a page, card or list that has nothing to show yet. It says what is empty, why, and what to do next.
Installation
Set up Camaleo once (Installation), then import what you need. It renders on the server.
import { EmptyState, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, EmptyStateActions } from "@camaleo/react";Anatomy
A centered column with up to four parts. Pass icon, title, description and actions, or build it from the parts as children. Every part has a data-slot you can target from CSS.
Examples
Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.
No invoices yet
Create your first invoice, or import the ones you already sent from a CSV file.
0 of 4 products
No products match “headphones”
Check the spelling, or search by brand or model.
No search results
Type a product name, then clear the search. Repeat the query in the title so people see what to change, and announce the count in a role="status", since the empty state itself is not read out when it appears.
Couldn’t load your orders
The connection dropped before the list arrived. Your orders are safe; try again in a moment.
Loading failed
When data fails to load, say what failed and that nothing was lost, then offer a retry. A way to reach support is a link, because it goes somewhere.
You’re all caught up
No unread notifications. New ones show up here.
Nothing left to do
When empty is the good outcome, a short confirmation is enough: pass icon={null} to drop the default folder icon, and leave out actions.
Recent payments
October 2026
No payments this month
Payments received from Oct 1 appear here.
Inside a card
Keep the card's own title, so people know which section is empty, and say when it will fill up.
Import your contacts
Upload a spreadsheet and we’ll create one contact per row.
- CSV or XLSX, up to 5 MB
- One contact per row
- Columns for name and email
Built from parts
Compose the parts as children when you need more than a title and a sentence, like the rules for an import. With children, no default icon is drawn.
No projects yet
Projects group the tasks, files and people of one piece of work.
First item
Create a project, then delete them all. The button you clicked disappears with the view, so focus moves to the button that replaces it and a status message says what happened.
In context
An empty state usually sits where the content will be: in a card, under a search, in place of a list. These are whole pieces of UI you can copy, in the skin you picked.
Support inbox
0 openInbox zero
All 18 tickets from today are resolved. New tickets from the help center arrive here.
Catalog
No products match “standing desk”
This product isn’t in the catalog yet. Add it, or try another name.
Team
Acme Studio · Free plan, up to 5 people
Only you so far
Invite people by email. They see your projects as soon as they accept.
Guidelines
No invoices yet
Create your first invoice, or import the ones you already sent from a CSV file.
Say why the space is empty and put the action that fills it right there.
Empty
No data.
People can't tell if something broke or what to do, so they leave.
No invoices yet
Your first invoice takes about two minutes.
Nothing is wrong yet, so use a neutral icon and say how quick the first step is.
Error: 0 invoices found
No records exist. Contact your administrator.
Red icons and the word "Error" make people think data was lost.
Props
children; null removes it.<h3>. For another level, pass an <EmptyStateTitle as="h4"> as a child instead.EmptyStateIcon, EmptyStateTitle, EmptyStateDescription and EmptyStateActions take the attributes of their HTML element (span, h3, p, div). EmptyStateTitle also takes as (h2 to h6, or p; default h3) to set the heading level. EmptyState takes the attributes of a div.
Styling hooks
Restyle it without forking: target the slots, or set the tokens on a parent, a skin or the empty state itself.
Tokens it reads
Color
Shape & size
Type & motion
This component only
Accessibility
- The title prop renders an <h3>. Inside a card whose title is also an <h3>, pass <EmptyStateTitle as="h4"> as a child instead, so the headings nest.
- The icon is wrapped in aria-hidden, so screen readers read only the title and the description.
- The empty state is not a live region. When it replaces results after a search or a delete, announce the change with a role="status" next to it.
- When the action that emptied the list removes the focused button, move focus to the next control yourself, such as the search field or the empty state's main action.