Empty State Component

Category: Feedback

The EmptyState component is used to display empty or error states with clear actions for users to take next steps. It provides a consistent way to handle situations where there's no data to show or when something goes wrong.

When to Use

• Empty states: When there's no data or content to show (new accounts, no matching filters, etc.)
• Error states: When the system fails to retrieve or display data (timeouts, API errors)
• Setup flows: When additional user actions are required to get started

General Structure

The component follows this structure:

1. Visual element - Icon, illustration, or custom content
2. Title - 3-6 words, the anchor element
3. Description - 1 short sentence explaining the situation
4. Actions - 1-2 buttons max to avoid choice overload

API

EmptyState uses a compound component API with opinionated layout and flexible styling:

• EmptyState - Main container with consistent spacing
• EmptyState.Visual - Visual element (icon, illustration, etc.)
• EmptyState.Title - Title text with flexible styling
• EmptyState.Description - Description text with flexible styling
• EmptyState.Actions - Action buttons container with consistent spacing

Layout Props (Opinionated)

• EmptyState accepts a spacing prop ("sm", "md", "lg", "xl") for consistent gap control

Styling Props (Flexible)

• EmptyState.Title and EmptyState.Description accept className for custom styling
• EmptyState.Title accepts size prop for text sizing

Usage

Error State with Icon

Show Editor

Multiple Actions

Show Editor

Custom Styling

Show Editor