EmptyState

Placeholder component for empty views — when there's no data, no search results, or content hasn't been created yet. Features decorative concentric rings around an icon for visual emphasis.

Also known as: empty view, no data, blank slate, zero state

View in Storybook

When to use

• Showing a meaningful message when a list, table, or view has no content.
• Guiding users to take action (create, upload, search again).
• Providing visual feedback after an empty search or filter result.

Import

import { EmptyState } from '@vacano/ui'

Usage

<EmptyState
  icon={<SearchIcon />}
  title="No results found"
  description="Your search did not match any results. Please try again."
  actions={<Button>New project</Button>}
/>

Without icon

<EmptyState
  title="Nothing here"
  description="There is no content to display at this time."
/>

With actions

<EmptyState
  icon={<FileTextIcon />}
  title="No documents"
  description="Get started by creating your first document."
  actions={
    <>
      <Button variant="transparent">Learn more</Button>
      <Button>Create document</Button>
    </>
  }
/>

Title only

<EmptyState icon={<SearchIcon />} title="No results found" />

Props

Prop	Type	Default	Description
icon	ReactNode	-	Icon displayed inside the concentric rings
title	ReactNode	required	Main heading text
description	ReactNode	-	Supporting text below the title
actions	ReactNode	-	Action buttons or links
className	string	-	CSS class name for the root element
classnames	EmptyStateClassNames	-	Custom class names for sub-elements
ref	Ref<HTMLDivElement>	-	Ref forwarded to the root element
data-test-id	string	-	Test identifier attribute

EmptyStateClassNames

Key	Description
icon	Icon area with concentric rings
title	Title heading
description	Description text
actions	Actions container

Related

• Spinner - Loading indicator
• Skeleton - Loading placeholder