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" role="status" aria-label="No items found">
				<span class="axicon render" data-name="box-open" aria-hidden="true"></span>
				<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="secondary">Adjust Filters</button>
				<button class="primary">Add New Item</button>
				</div>
				</div>

Usage Guidelines

The .empty class centers its content and applies a dashed border for visual distinction. You can customize the icon with native Axicons, then tailor the 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" and aria-label on 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.

Features

  • Semantic Structure - Built with native HTML5 elements for maximum reliability.
  • Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
  • Fully Responsive - Scales perfectly from mobile to desktop screens.
  • No JS Dependency - Core functionality relies on pure CSS for maximum performance.
  • Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Empty State component is designed for versatile implementation across modern web applications. Ideal scenarios include:

  • Dashboards & Admin Panels - Structured data presentation and interface control.
  • Content Management Systems - Organizing complex information hierarchies and media.
  • E-Commerce Platforms - Enhancing product discovery and user workflows.
  • Marketing Sites - Highlighting key product offerings cleanly and effectively.
  • SaaS Applications - Delivering native-feeling, responsive app experiences.