EmptyState

Alpha

A semantic empty state component for when there is no content to display. Provides a heading, description, and optional action.

Import

import { EmptyState } from "@compa11y/react";

Usage

Example.tsx

import { EmptyState, Button } from "@compa11y/react";

function NoResultsExample() {
  return (
    <EmptyState
      title="No results found"
      description="Try adjusting your search or filter to find what you're looking for."
      action={<Button variant="primary">Clear filters</Button>}
    />
  );
}

function EmptyInboxExample() {
  return (
    <EmptyState
      title="Your inbox is empty"
      description="New messages will appear here."
      headingLevel="h3"
    />
  );
}

Features

Semantic heading with configurable level (h1–h6)
Optional icon, description, and action
Screen reader friendly with proper heading hierarchy
CSS variable customization

Props

EmptyState component props
Prop	Type	Default	Description
`title`*	`string`	-	Heading text
`description`	`string`	-	Explanatory text below the heading
`icon`	`ReactNode`	-	Decorative icon above the heading
`action`	`ReactNode`	-	Call-to-action element (e.g. a Button)
`headingLevel`	`'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'`	`'h2'`	Semantic heading level

Keyboard Interactions

Accessibility

All keyboard interactions follow WAI-ARIA best practices and work without any additional configuration.

Keyboard shortcuts for EmptyState
Key	Action
`Tab`	Focuses the action button if present