molecule

EmptyState

Placeholder component displayed when lists, tables, or containers have no data.

Overview

The EmptyState component provides visual feedback when a container has no content to display. It typically includes an icon, title, description, and an optional call-to-action button to guide users on what to do next.

No results found

Try adjusting your search or filters to find what you're looking for. 

<EmptyState
  title="No results found"
  description="Try adjusting your search or filters..."
  action={<Button>Clear Filters</Button>}
/>

Props

Prop Type Default Description
icon ReactNode - Icon displayed above the title
title string - Required. Main heading text
description string - Secondary explanatory text
action ReactNode - Call-to-action element (typically a Button)
size 'sm' | 'md' | 'lg' 'md' Size variant affecting padding and text sizes

Variants

Sizes

EmptyState comes in three sizes for different contexts - from compact inline use to full-page empty states.

Small

No items

Medium (default)

No items found

There are no items to display.

Large

Welcome to your dashboard

Get started by creating your first project. 

<EmptyState size="sm" title="No items" />
<EmptyState size="md" title="No items found" description="..." />
<EmptyState size="lg" title="Welcome" action={...} />

Examples

No Search Results

Display when a search or filter returns no matches.

No results found

Try adjusting your search terms or clearing filters.

Empty Table

Placeholder for tables with no data.

No users yet

Start by inviting team members to your organization.

First-Time User

Onboarding state for new users with no content.

Create your first project

Projects help you organize your work. Get started by creating one now.

Compact Inline

Small empty state for sidebars or cards.

No notifications

<EmptyState size="sm" title="No notifications" />

Accessibility

  • Semantic Structure: Uses heading elements for title and paragraph for description.
  • Focus Management: Action buttons are focusable via standard tab navigation.
  • Screen Reader: Content is announced in logical order: icon context, title, description, then action.
  • WCAG Compliance: Meets AA standards for color contrast and interactive elements.

Best Practices

  • Always provide a clear, actionable title that explains the empty state
  • Include a description when additional context would be helpful
  • Add an action button when users can take immediate action to populate the container
  • Use appropriate size - small for inline/sidebar, large for full-page states
  • Don't use EmptyState for loading states - use Spinner instead