Data Display
Empty State
An Empty state screen is used to prompt the user to take action or provide input when there is no existing data or content to display.
Examples
No results found
Try adjusting your search or filters to find what you're looking for.
AccessibilityWCAG 2.1 Level AA Compliant
Features8 checks
- ARIA live region (role="status", aria-live="polite") announces content changes to screen readers
- Semantic heading structure with h3 element for title
- Descriptive aria-label for the container, defaulting to title
- Icons and illustrations marked with aria-hidden="true" to prevent redundant announcements
- Action buttons meet minimum 44x44px touch target size (WCAG 2.5.5)
- Focus indicators with 2px ring and 2px offset for keyboard navigation (WCAG 2.4.7)
- Color contrast ratios meet or exceed 4.5:1 for all text (WCAG 1.4.3)
- Clear, actionable button labels that describe the action being performed
When to use this component
✓Do's
- •Lists or tables with no data to guide users to take the next action
- •Search results with no matches
- •Providing a clear CTA button to help users recover or continue
- •Filtered views with no results
✗Don'ts
- •Loading states, use Skeleton or Spinner
- •Show an empty container with no explanation or action
- •Use generic "No data" text without context-specific guidance
- •Temporary states, use Toast
Do's and Don'ts
✓ Do's
No active applications
Start your application journey below.
Use empty states to guide users on what action to take next.
✗ Don'ts
No data
Don't show an empty container with no explanation or action, always provide context-specific guidance.