Empty

Data Display

Empty state placeholder with icon, title, description, and action button for zero-state UX

Empty

Flexible empty state component with variants, sizes, preset icons and a composable API for building rich placeholders.

Variants (props API)

Use the props API for quick empty states. Set variant, iconType, iconColor, title, description, action and extra to cover most use cases.

No messages

Your inbox is empty. Start a conversation to see messages here.

No results found

We couldn't find any results matching your search criteria.

No files

This folder is empty. Upload files to get started.

No data

There is no data to display at the moment.

Composable API

Use subcomponents like EmptyIcon, EmptyTitle, EmptyDescription, EmptyActions and EmptyExtra for more control. This mirrors your recommended pattern.

No messages

Your inbox is empty. Start a conversation to see messages here.

Empty state

No data available

Upload or import data to get started.

You can always change data sources later.

Sizes & preset icons

Resize the component with size and use iconType / iconColor to quickly match contexts like search, folders, cart, notifications and more.

Sizes

Small

Compact empty state for tight spaces.

Medium

Default size for most use cases.

Large

More spacing and larger text.

Extra large

Great for prominent empty states.

Preset icon types

Search

No results

Folder

Empty folder

Cart

Cart is empty

Notifications

No alerts

Full height

Use fullHeight to vertically center the empty state for full-page views like 404s and permission errors.

Page not found

The page you're looking for doesn't exist or has been moved.

Usage Guidelines

When to Use

  • No search results
  • Empty lists
  • First-time user states

Accessibility

  • Status role for empty state
  • Action buttons accessible

Performance

  • Static content
  • Minimal DOM

Common Mistakes

  • Generic message not helpful
  • Missing action to resolve empty state

Frequently Asked Questions

Empty provides placeholder UI for states with no data, including icon, message, and action.
Yes, Empty supports action buttons like 'Create new' or 'Import data'.

View on GitHub

See the full source code on GitHub

Related Components

View all
Accordion

Collapsible content sections with single/multiple expansion modes, animation, and keyboard navigation

Avatar

User avatar with image loading, fallback text generation, status indicators, and shape variants

AvatarGroup

Stacked avatar display with overflow handling, max count configuration, and hover expansion

Badge

Status indicator with variant system, dot mode, positioning, and pulsing animation support

Previous

Dropdown

Next

FloatingActionButton