Empty State Component
Axiom01's empty state component provides a clear and user-friendly message when there is no data to display. It guides users on what to do next, improving the overall user experience and reducing confusion.
Basic Empty State
No Items Found
It looks like there are no items matching your criteria. Try adjusting your filters or adding new items to get started.
Code Example
<div class="empty-state" role="status" aria-label="No items found">
<i class="fas fa-box-open" aria-hidden="true"></i>
<h3>No Items Found</h3>
<p>It looks like there are no items matching your criteria. Try adjusting your filters or adding new items to get started.</p>
<div class="actions">
<button class="button secondary">Adjust Filters</button>
<button class="button primary">Add New Item</button>
</div>
</div>Usage Guidelines
The .empty-state class centers its content and applies a dashed border for visual distinction. You can customize the icon (using Font Awesome), heading, and descriptive text to fit the context of your application. Always provide a clear call to action (e.g., a button) to help users resolve the empty state.
Ensure the message is helpful and not accusatory, guiding the user towards a solution rather than simply stating the absence of data.
Accessibility
- The
role="status"andaria-labelon the empty state container provide context for screen readers. - Icons are marked with
aria-hidden="true"if purely decorative. - Ensure any interactive elements (like buttons) have appropriate accessible labels.
Customization
Customize the appearance using Axiom01's CSS variables for colors, spacing, and typography. The icon, heading, and text can be easily changed to match your application's design.