Feedback
EmptyState
World-class empty state components for displaying zero-data states with contextual messaging, illustrations, and clear calls-to-action. Designed to guide healthcare users without creating confusion.
Variants
Use semantic variants to convey different types of empty states. Each variant has appropriate styling and default icons.
Default
General empty state for any context.
Search
No results matching your query.
No Results
Unable to find matching items.
First Use
Welcome! Get started here.
Success
All items processed successfully.
Error
Something went wrong.
No Appointments
Show when a patient has no scheduled appointments.
No appointments scheduled
This patient doesn't have any upcoming appointments. Schedule one to continue their care.
No Search Results
Display when search or filter returns no matching patients.
No patients found
We couldn't find any patients matching your search. Try adjusting your filters or search terms.
First-Use / Welcome
Welcome new users and guide them to take their first action.
Welcome to Patient Records
You're all set up! Start by adding your first patient or importing existing records from your previous system.
All Tasks Complete
Celebrate when all items have been processed - use success variant.
All caught up!
You've processed all pending eligibility checks. New requests will appear here when submitted.
Error State
When data fails to load, show an error state with retry option.
Unable to load records
We encountered an error while fetching patient records. Please try again or contact support if the problem persists.
Sizes
Choose the appropriate size based on context and available space.
Small
Compact areas like sidebars.
Medium
Default for most use cases.
Large
Full pages or main content.
Compact Mode
Use compact horizontal layout for inline empty states in smaller containers.
No lab results
Results will appear here once processed.
No matching medications
Try a different search term.
With Background
Add a subtle background for standalone empty states that need visual separation.
No insurance on file
Add insurance information to enable eligibility verification and claims processing.
Custom Icons
Use context-appropriate icons to reinforce the message.
No recent visits
This patient hasn't been seen in the last 12 months.
No documents found
Upload patient documents to see them here.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Title text (required) |
description | string | — | Description text explaining what to do |
size | 'sm' | 'md' | 'lg' | 'md' | Size variant |
variant | 'default' | 'search' | 'error' | 'first-use' | 'success' | 'no-results' | 'default' | Visual variant with contextual styling |
icon | Snippet | — | Custom icon snippet (overrides variant icon) |
action | Snippet | — | Primary action button snippet |
secondaryAction | Snippet | — | Secondary action button snippet |
showBackground | boolean | false | Show subtle background |
compact | boolean | false | Horizontal compact layout |
Healthcare Best Practices
- Be Specific: Use descriptive titles like "No appointments scheduled" instead of generic "No data found".
- Guide Action: Always provide a clear call-to-action when users can take steps to populate the empty state.
- Use Variants: Choose the right variant (search, error, first-use, success) to set appropriate visual context.
- Calm Tone: Healthcare contexts can be stressful - use reassuring language that doesn't alarm patients or staff.
- Distinguish States: Clearly differentiate between "empty" (no data yet) and "error" (failed to load) states.
Accessibility Notes
- ARIA Status: Uses
role="status"to announce state to screen readers. - Hidden Icons: Decorative icons use
aria-hidden="true". - Semantic Headings: Titles use proper heading elements (h3) for document structure.
- Action Focus: Ensure action buttons are keyboard accessible and clearly labeled.