Empty Message

View in Storybook

Explore interactive examples and all component variations in our Storybook.

The EmptyItems component provides a user-friendly way to display empty states in your application. It helps communicate when no data is available and can guide users on what to do next. Perfect for empty lists, search results, dashboards, and any interface that might not have content to display.

Basic Usage

View in Storybook

No items found

Try adjusting your search or filters

With Custom Icon

No search results

We couldn't find any results for your search term

With Action Button

No users yet

Get started by adding your first user

Different Scenarios

No documents

Upload your first document to get started

Your cart is empty

Add some items to your cart

No messages

Your inbox is empty

Connection failed

Unable to load data. Please try again.

Search Results Empty State

No results for "nonexistent item"

We couldn't find any results matching your search.

Try:

• • Checking your spelling
• • Using different keywords
• • Using more general terms

File Upload Empty State

No files uploaded

Drag and drop files here, or click to browse

Supports: JPG, PNG, PDF, DOC (Max 10MB)

Custom Styling

No team members

No users found

Add users to get started

Welcome to your dashboard!

Start by adding your first project

Properties

EmptyItems

Property	Type	Description
notFoundText	string	Main message text to display.
notFoundAction	ReactElement	Optional action element (buttons, links, additional text).
icon	ReactNode	Custom icon to display. Defaults to CircleOff icon.
className	string	Additional CSS classes for styling the container.

Accessibility

The EmptyItems component includes basic accessibility features:

• Semantic Structure - Uses proper div elements with meaningful content
• Screen Reader Support - Text content is accessible to screen readers
• Focus Management - Interactive elements within actions are focusable
• Color Contrast - Default styling maintains good contrast ratios
• Responsive Design - Adapts to different screen sizes

Common Use Cases

The EmptyItems component is perfect for:

• Empty Lists - When data arrays are empty or filtered out
• Search Results - No matches found for search queries
• File Uploads - Before any files have been uploaded
• Shopping Carts - When cart is empty
• Dashboards - No data available for widgets
• User Management - No users or team members yet
• Content Management - No articles, posts, or media
• Error States - Connection failures or loading errors

Best Practices

1. Clear Messaging - Use descriptive, helpful text that explains the situation
2. Actionable Content - Provide next steps or actions when appropriate
3. Consistent Icons - Use relevant icons that match the context
4. Appropriate Tone - Match the tone to your application's voice
5. Visual Hierarchy - Make the message and actions clearly distinguishable
6. Responsive Design - Ensure the component works well on all screen sizes
7. Loading States - Don't show empty states while data is still loading
8. Context Awareness - Tailor messages to the specific situation or user state