Empty State
Displays an empty stateAnatomy
Import and assemble the component:
1import { EmptyState } from '@raystack/apsara'23<EmptyState />
API Reference
Renders a placeholder for empty content areas.
Prop
Type
Slots
Every rendered part carries a stable data-slot attribute for styling and testing:
| Slot | Element |
|---|---|
empty-state | The root element |
empty-state-icon-container | Wrapper around the icon |
empty-state-icon | The icon element |
empty-state-content | Wrapper around the heading and subheading |
empty-state-heading | The heading text (when heading is set) |
empty-state-subheading | The subheading text (when subHeading is set) |
empty-state-actions | Wrapper around the action buttons (empty2 variant only) |
Accessibility
- Uses semantic HTML elements for proper content structure
- Heading and description are accessible to screen readers