EmptyState

molecules

Reusable empty state — illustration slot + title + description + optional CTA. Used in every list, table, search result.

ARIA Role: status

Demo

Demo for EmptyState (molecules)

Reusable empty state — illustration slot + title + description + optional CTA. Used in every list, table, search result.

Props

PropTypeRequiredDefaultDescription
titlestringYes—

TypeScript Interface

interface EmptyStateProps {
  title: string;
  description?: string;
  icon?: React.ReactNode;
  illustration?: React.ReactNode;
  cta?: { label: string; onClick?: () => void; href?: string };
  secondaryCta?: { label: string; onClick?: () => void; href?: string };
}

Assertions (NASA Rule 5)

  • [type]title required — never render an empty empty state(NASA Rule 7)
  • [aria]Wrapper has role='status'; CTA must be focusable(WCAG 4.1.3)

Usage

Import

import { Emptystate } from '@epasslive/design-system'

Basic

<Emptystate />

With Variants

<Emptystate variant="primary" size="md" />