EmptyState
Placeholder for views that have no data to display
Category: display · WCAG 2.2-AA · empty, placeholder, zero-state, no-data
Sizes
- md
- lg
Props
| Prop | Type | Default | Description |
|---|---|---|---|
icon | ReactNode | — | Icon element rendered in the component. |
title | string | — | Title text for the component. |
description | string | — | Supporting description text. |
action | ReactNode | — | Primary action shown in the component. |
size | 'md' | 'lg' | md | Visual size of the component (e.g. 'sm', 'md', 'lg'). |
Design tokens
--cascivo-color-text--cascivo-color-text-subtle--cascivo-color-text-muted--cascivo-color-bg-subtle--cascivo-radius-full
When to use
- Filling a view that has no data with guidance and a primary next step
- Explaining why a list/table is empty (no results, nothing created yet)
- Offering an action that resolves the empty condition (action prop)
When not to use
- Content is still loading — use Skeleton or Spinner
- An error occurred — use Alert to explain the failure
How to build an accessible EmptyState in React →
Examples
Basic
<EmptyState title="No results" description="Try adjusting your filters." />With action
<EmptyState icon="📄" title="No documents yet" description="Create your first document to get started." action={<Button>New document</Button>} />