Alertalternative
Use Alert for error states with retryEmptyState
Placeholder for empty content areas. Provides context, guidance, and actions when no data is available.
Setup
import { EmptyState } from '@fragments-sdk/ui';Examples
Default
Basic empty state with action
Loading preview...
No Results
Empty search results
Loading preview...
With Secondary Action
Empty state with two actions
Loading preview...
Small
Compact empty state for inline use
Loading preview...
Large
Prominent empty state for full-page use
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | EmptyState content - use EmptyState.Icon, EmptyState.Title, EmptyState.Description, EmptyState.Actions sub-components |
size | enumsmmdlg | md | Size variant |
Usage Guidelines
When to use
- Empty lists, tables, or search results
- New user onboarding (no content yet)
- Filtered views with no matches
- Error states where content failed to load
When not to use
- Loading states (use skeleton or spinner)
- Error messages with retry (use Alert)
- Temporary messages (use Toast)
Best practices
- Always explain why the area is empty
- Provide a clear action to resolve the empty state
- Use appropriate icons to reinforce the message
- Keep messaging positive and actionable
- EmptyState compound sub-components forward DOM props for ids, aria attributes, and handlers
Accessibility
- Empty state content is accessible to screen readers
- Action buttons follow button accessibility guidelines