CSS-Only

Empty State

Placeholder component for "no content" states with optional graphics, text, and call-to-action buttons. Centered layout with flexible sizing and semantic variants.

Example

No items found

Get started by creating your first item.

<div class="omni-empty-state">
  <svg class="omni-empty-state-icon" aria-hidden="true">...</svg>
  <h3 class="omni-empty-state-title">No items found</h3>
  <p class="omni-empty-state-description">Get started by creating your first item.</p>
  <button class="omni-button" data-variant="primary">Create Item</button>
</div>

Anatomy

Empty state components consist of several optional parts:

  1. Container - .omni-empty-state - Centered flex layout
  2. Icon/Graphic - .omni-empty-state-icon - Decorative visual (use aria-hidden="true")
  3. Title - .omni-empty-state-title - Primary heading (use semantic heading tags)
  4. Description - .omni-empty-state-description - Supporting text
  5. Actions - Direct .omni-button or .omni-empty-state-actions container
  6. Secondary Link - .omni-empty-state-link - Optional text link

Variants

Basic Empty State

Minimal empty state with just text and a single action:

No results

Try adjusting your search or filter to find what you're looking for.

With Icon

Add a decorative icon for visual interest (always use aria-hidden="true"):

No notifications

You're all caught up! We'll notify you when something new arrives.

With Multiple Actions

Use .omni-empty-state-actions container for primary and secondary actions:

Create your first project

Projects help you organize your work and collaborate with your team.

Learn more about projects

Size Variants

Use data-size to adjust for different contexts:

Small (data-size="sm")

For inline contexts like table cells or small cards:

No data

No entries to display.

Medium (default)

Standard size for most use cases:

No messages

Start a conversation with your team.

Large (data-size="lg")

For full-page empty states:

Welcome to your dashboard

Your workspace is empty. Get started by creating your first project or inviting team members.

Bordered

Add data-bordered for visual structure with dashed border:

Drop files here

Or click to browse your computer.

Semantic Variants

Use data-variant to convey state meaning:

Success

Celebration states like "inbox zero":

All caught up!

You've completed all your tasks. Great work!

Warning

Attention needed states:

No items match your filters

Try adjusting your filters or search terms.

Error

Error or failure states:

Failed to load data

We couldn't retrieve your items. Please try again.

Common Use Cases

Search Results

No results for "quantum physics"

Try different keywords or check your spelling.

Inbox Zero

Inbox Zero!

You've read all your messages. Enjoy the zen.

First-Time User

Start building

Create your first component to get started with the builder.

API Reference

Container

Class Description
.omni-empty-state Base container with centered flex layout

Attributes

Attribute Values Default Description
data-size sm, md, lg md Adjusts padding, icon size, and text size
data-bordered — — Adds dashed border and background
data-variant success, warning, error — Semantic color for icon (information, celebration, error states)

Child Elements

Class Element Description
.omni-empty-state-icon <svg> Decorative graphic (use aria-hidden="true")
.omni-empty-state-title <h2>-<h4> Primary heading (choose semantic level for page structure)
.omni-empty-state-description <p> Supporting text (max-width: 36ch)
.omni-empty-state-actions <div> Container for multiple buttons
.omni-empty-state-link <a> Secondary text link
.omni-button <button> Primary action (can be direct child)

Accessibility

  • Graphics are decorative - always use aria-hidden="true" on icons
  • Use semantic heading tags (<h2>-<h4>) based on page structure
  • Title text should be concise and descriptive (not "Empty" or "No data")
  • Description provides actionable guidance when possible
  • Action buttons have clear, descriptive labels
  • Text remains readable at all sizes (uses relative units)
  • Respects color preferences and high contrast modes
  • Description text limited to 36 characters per line for readability

Best Practices

Content Guidelines

  • Be specific - "No projects found" instead of "Empty"
  • Provide context - Explain why the state is empty
  • Offer guidance - Suggest what users can do next
  • Stay positive - Frame as opportunity, not failure (when appropriate)
  • Keep it brief - Short title, concise description

When to Use

  • Empty collections - No items in list, table, or grid
  • Search results - No matches for query
  • Filtered views - Filters exclude all items
  • First-time users - Onboarding and getting started
  • Completion states - Inbox zero, all tasks done
  • Error recovery - Failed to load data

Size Guidelines

  • Small (data-size="sm") - Table cells, small cards, sidebars
  • Medium (default) - Card bodies, content sections, modals
  • Large (data-size="lg") - Full page states, dashboards

Components Used

Other OmniUI components demonstrated on this page:

Button