Empty
Display empty states with customizable icons, titles, and actions.
CMS Demo
See how content editors configure empty states:
Loading...
CMS ConfigurationSimulates Payload CMS empty state configuration
Basic Usage
Loading...
Empty StateEmpty state variations
Installation
The Empty component is part of the UI package.
Usage
import {
Empty,
EmptyMedia,
EmptyTitle,
EmptyDescription,
EmptyContent,
} from "@mordecai-design-system/ui"<Empty>
<EmptyMedia>
<InboxIcon className="size-12" />
</EmptyMedia>
<EmptyTitle>No messages</EmptyTitle>
<EmptyDescription>
Your inbox is empty. New messages will appear here.
</EmptyDescription>
<EmptyContent>
<Button>Compose</Button>
</EmptyContent>
</Empty>Examples
Minimal
<Empty>
<EmptyTitle>No data</EmptyTitle>
</Empty>With Icon
<Empty>
<EmptyMedia>
<FileIcon className="size-12" />
</EmptyMedia>
<EmptyTitle>No files</EmptyTitle>
<EmptyDescription>
Upload files to get started
</EmptyDescription>
</Empty>With Icon Variant
<Empty>
<EmptyMedia variant="icon">
<UsersIcon className="size-6" />
</EmptyMedia>
<EmptyTitle>No team members</EmptyTitle>
<EmptyDescription>
Invite people to collaborate on this project
</EmptyDescription>
<EmptyContent>
<Button>Invite Members</Button>
<Button variant="outline">Learn More</Button>
</EmptyContent>
</Empty>Sub-components
| Component | Description |
|-----------|-------------|
| Empty | Root container |
| EmptyHeader | Header grouping container |
| EmptyMedia | Icon/media container with variants |
| EmptyTitle | Title text |
| EmptyDescription | Description text |
| EmptyContent | Action buttons/content container |
Props
Empty
Empty and its sub-components (EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent) accept all standard div element props.
EmptyMedia
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | enum | default | — |