EmptyState

feedback

Empty state placeholder with icon, title, description, and action slot. Dashed border container for empty lists, search results, and initial states. Uses role=status with aria-label.

Import

typescript
import { EmptyState } from "packages/ui/src";

Props

EmptyStateProps

PropTypeRequired
iconReactNodeNo
titlestringYes
descriptionstringNo
actionReactNodeNo
classNamestringNo

Examples

No Items

No components yet

Create your first component to get started with the design system.

No Search Results

No results found

Try adjusting your search query or clearing filters.

Minimal

Nothing here

Metadata

Component Metadata
Familyfeedback
FrameworksNext.js, Astro/EmDash
DescriptionEmpty state placeholder with icon, title, description, and action slot. Dashed border container for empty lists, search results, and initial states. Uses role=status with aria-label.
PropsEmptyStateProps (icon?: ReactNode, title: string, description?: string, action?: ReactNode, className?: string)
Statesminimal (title only), with-icon, with-description, with-action, full
A11y
  • role=status for live region semantics
  • aria-label from title
  • Icon container is aria-hidden
  • Action slot is fully interactive
Responsive
  • Centers content
  • Max-width on description for readability
Motion
  • No animation — static placeholder
Token Dependencies
  • components.emptyState.background
  • components.emptyState.borderColor
  • components.emptyState.borderRadius
  • components.emptyState.padding
  • components.emptyState.iconColor
  • components.emptyState.iconSize
  • components.emptyState.titleColor
  • components.emptyState.titleFontSize
  • components.emptyState.descriptionColor
  • components.emptyState.descriptionFontSize
  • components.emptyState.gap
Content Slotsicon (ReactNode), title (string), description (string), action (ReactNode)
CMS Bindings
  • Title from CMS
  • Description from CMS
  • Action label from CMS
Test Cases
  • Renders with title
  • Has role=status
  • Shows description when provided
  • Renders icon when provided
  • Renders action when provided
  • Has aria-label from title
  • Icon is aria-hidden
  • Passes className through