Skip to content

Overview

The Empty State component provides a centered, visually clear placeholder for sections that have no data to display. It includes an icon, a title, an optional description, and a slot for action buttons. This guides users on what to do next rather than showing a blank area.

Use empty states for:

  • Empty data tables
  • No search results
  • Empty inboxes or feeds
  • First-time user onboarding

Basic Usage

No results found

Try adjusting your search or filter criteria.

<x-aura::empty-state
    title="No results found"
    description="Try adjusting your search or filter criteria."
/>

Props

Prop Type Default Description
icon string 'inbox' Icon name displayed at the top
title string 'Nessun risultato' Heading text
description string|null null Supplementary text below the title

Variants/Examples

No Data with Action Button

No customers yet

Get started by adding your first customer.

Add Customer 
<x-aura::empty-state
    icon="users"
    title="No customers yet"
    description="Get started by adding your first customer."
>
    <x-aura::button variant="primary" icon="plus" href="/customers/create">
        Add Customer
    </x-aura::button>
</x-aura::empty-state>

No Search Results

No results found

No items match your search. Try different keywords or clear your filters.

<x-aura::empty-state
    icon="search"
    title="No results found"
    description="No items match your search. Try different keywords or clear your filters."
>
    <x-aura::button variant="outline" x-on:click="clearSearch()">
        Clear Search
    </x-aura::button>
</x-aura::empty-state>

Empty Inbox

Your inbox is empty

Messages you receive will appear here.

<x-aura::empty-state
    icon="inbox"
    title="Your inbox is empty"
    description="Messages you receive will appear here."
/>

Empty File List

No files uploaded

Upload your first file to get started.

<x-aura::empty-state
    icon="folder"
    title="No files uploaded"
    description="Upload your first file to get started."
>
    <x-aura::button variant="primary" icon="upload">
        Upload File
    </x-aura::button>
</x-aura::empty-state>

Multiple Actions

No documents

Create a new document or import an existing one.

<x-aura::empty-state
    icon="file"
    title="No documents"
    description="Create a new document or import an existing one."
>
    <div class="flex gap-3">
        <x-aura::button variant="primary" icon="plus">Create New</x-aura::button>
        <x-aura::button variant="outline" icon="upload">Import</x-aura::button>
    </div>
</x-aura::empty-state>

Slots

Slot Description
Default Action area below the description. Renders only when the slot has content.

Accessibility

  • The title renders as an <h3> element for proper document outline.
  • The icon is decorative and does not convey additional meaning beyond visual context.
  • Action buttons in the default slot should have clear, descriptive labels.
  • The component is centered and uses sufficient spacing for readability.
  • Ensure the description provides enough context for screen reader users who cannot see the icon.