EmptyState

A standardized empty state component for when there is no data to display. Provides helpful context through an icon, title, description, and optional primary and secondary actions to guide users toward next steps.

Import

import { EmptyState } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

<EmptyState
  icon={<Icon name="AcademicCapIcon" />}
  title="No lessons yet"
  description="Get started by creating your first lesson."
  action={<Button>Create Lesson</Button>}
  secondaryAction={<Button variant="ghost">Learn more</Button>}
/>

Props

Prop	Type	Default	Description
`title`*	string	-	Main title text.
`icon`	ReactNode	-	Icon displayed above the title.
`description`	string	-	Description text shown below the title.
`action`	ReactNode	-	Primary action element, typically a Button.
`secondaryAction`	ReactNode	-	Secondary action element such as a link or ghost button.
`className`	string	-	Additional CSS classes for the wrapper.
`size`	'sm' \| 'md' \| 'lg'	`'md'`	Size variant controlling padding, icon size, and text sizes.