EmptyState

Friendly placeholder when there's no data.

Overview

EmptyState is a flexible block for handling empty states across your application. It provides a consistent way to communicate when there's no data to display, with options for icons, messages, and call-to-action buttons.

1
2
3
4
5
6

Install

1

Code Examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

Props

• icon - Icon or illustration to display (optional)
• title - Main title/heading (default: "No items found")
• description - Description text (optional)
• action - Primary action button (optional)
• secondaryAction - Secondary action button (optional)
• size - Size variant: "sm" | "md" | "lg" (default: "md")
• className - Additional className for container (optional)

Action Object

• label - Button label (required)
• onClick - Click handler (required)
• variant - Button variant: "solid" | "outline" | "ghost" (default: "solid" for primary, "outline" for secondary)

Features

• Flexible icon support (React nodes)
• Customizable title and description
• Primary and secondary action buttons
• Three size variants (sm, md, lg)
• Centered layout
• Responsive design
• Fully accessible

Use Cases

• Empty lists or tables
• No search results
• Empty collections
• First-time user experiences
• Error states (when appropriate)
• Onboarding flows

Accessibility

EmptyState uses semantic HTML and proper heading hierarchy. Action buttons are keyboard accessible and support focus states. Icons should have appropriate alt text or aria-labels when used.