EmptyState

The EmptyState component displays placeholder content when no data is available. It supports icons, descriptions, call-to-actions, and template suggestions.

Basic Example

A simple centered message with icon, description, and a primary action button.

No Projects Found

You don’t have any projects yet. Start by creating one to get going.

With Template Items

Display suggested templates, shortcuts, or examples for the user to start from.

Get Started with Templates

Choose from one of the predefined templates to speed up your setup.

View all templates

Compact Example

Use minimal layout when only a title and single action are required.

No Users Added

Props

Available properties and usage details.

  • icon?: ReactNode — Optional main icon displayed above the title.
  • title: string — Main heading of the empty state.
  • description?: string — Supporting text explaining the context.
  • actionLabel?: string — Label for the main action button.
  • onAction?: () => void — Handler called when the action button is clicked.
  • actionIcon?: ReactNode — Optional icon displayed before the button label.
  • items?: TemplateItem[] — Array of template cards with { title, description, icon, background, href }.
  • footerLink?: { label: string; href: string } — Optional footer link below the template list.

Integration Example

Example use inside a data-driven page when an API response returns no items.

No Documents

Your documents list is empty. Upload a new file or create a folder.