Empty State

A standardized placeholder screen displayed when there is no data to show.

Import

tsx

import { EmptyState } from '@tac-ui/web';

Playground

Interactively configure the EmptyState props below.

No files found

Upload your first file to get started.

Title

Description

tsx

<EmptyState
  title="No files found"
  description="Upload your first file to get started."
/>

With Icon and Action

Full empty state with icon, title, description, and a call-to-action button — the icon is centered inside a blurred circular container.

No files found

Upload your first file to get started. Supported formats include PDF, PNG, and JPEG.

tsx

<EmptyState
  icon={<FolderIcon />}
  title="No files found"
  description="Upload your first file to get started. Supported formats include PDF, PNG, and JPEG."
  action={<Button size="sm">Upload File</Button>}
/>

Minimal

Simple empty state with just a title and description — no icon or action — suitable for compact list placeholders.

Nothing here yet

Check back later or adjust your filters.

tsx

<EmptyState
  title="Nothing here yet"
  description="Check back later or adjust your filters."
/>

Visibility Toggle

The visible prop controls whether the component is rendered. When set to false, the component animates out using the dismiss animation before unmounting.

No results found

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

tsx

const [visible, setVisible] = useState(true);

<Button onClick={() => setVisible(v => !v)}>
  Toggle Empty State
</Button>

<EmptyState
  visible={visible}
  icon={<SearchIcon />}
  title="No results found"
  description="Try adjusting your search or filters."
  action={<Button size="sm" variant="outline">Clear filters</Button>}
/>

API Reference

Prop	Type	Default	Description
title	string	-	Primary heading text. Required.
icon	React.ReactNode	-	Optional icon or illustration displayed above the title inside a blurred circular container.
description	string	-	Optional descriptive text below the title.
action	React.ReactNode	-	Optional action button(s) rendered below the description.
visible	boolean	true	When false, the component animates out using dismissVariants before unmounting via AnimatePresence.
className	string	-	Additional CSS class names applied to the inner container div.