Skip to content

Overview

<x-aura-filament::empty-state> renders an illustrated placeholder for empty tables, widgets, inboxes, and lists — anywhere your UI has no content to show. Eight semantically-named variants ship out of the box, each with:

  • A three-layer SVG illustration (base stroke, primary accent, decorative sparks)
  • A sensible default title and description per variant
  • An optional size (sm / md / lg)
  • An actions slot for CTAs
  • Automatic re-tinting when the user changes the panel primary via the theme configurator
  • Gentle float / pulse / twinkle animations, gated on prefers-reduced-motion

Usage

<x-aura-filament::empty-state variant="no-orders" />

Drop this anywhere a Filament TablesResource, widget, page, or Livewire view would otherwise show an empty slate.

Full control

<x-aura-filament::empty-state
    variant="no-orders"
    title="Still waiting on your first order?"
    description="Drive traffic to your pricing page to get the ball rolling — once an order hits, the dashboard widgets above come alive."
    size="lg"
>
    <x-filament::button icon="heroicon-o-arrow-top-right-on-square" tag="a" href="/pricing">
        Open pricing page
    </x-filament::button>
    <x-filament::button color="gray" outlined tag="a" href="#">
        Learn more
    </x-filament::button>
</x-aura-filament::empty-state>

Variants

Variant Meaning Default title
no-data Generic "the table is empty" No data yet
no-results Search or filter yielded nothing No results found
no-users The users resource is empty No users yet
no-orders The orders / transactions resource is empty No orders yet
no-messages Inbox / chat / notifications empty Inbox zero
no-files Attachments, uploads, document list empty No files uploaded
no-notifications Notifications dropdown empty All caught up
error Something failed to load Something went wrong

Every default title and description comes from the EmptyStateVariant enum (BlueStarSystem\AuraFilament\Enums\EmptyStateVariant) and can be overridden per-render.

Sizes

<x-aura-filament::empty-state variant="no-data" size="sm" />   {{-- 5rem illustration --}}
<x-aura-filament::empty-state variant="no-data" size="md" />   {{-- 8rem (default)     --}}
<x-aura-filament::empty-state variant="no-data" size="lg" />   {{-- 11rem illustration --}}

Use sm inside compact widgets, md for most table / list empty states, and lg for hero-like standalone pages.

Using the enum directly

If you pick the variant dynamically, pass the enum for type safety:

use BlueStarSystem\AuraFilament\Enums\EmptyStateVariant;

$variant = match ($context) {
    'users' => EmptyStateVariant::NoUsers,
    'orders' => EmptyStateVariant::NoOrders,
    default => EmptyStateVariant::NoData,
};

<x-aura-filament::empty-state :variant="$variant" />

Strings also work (variant="no-data") — both are accepted.

Styling hooks

The illustrations use three CSS classes you can override in your own theme:

  • .fi-aes-base — neutral stroke (default: #9ca3af light / #6b7280 dark)
  • .fi-aes-accent — primary stroke + fill (drives from --primary-500 / --primary-400 in dark mode)
  • .fi-aes-spark — decorative twinkle specks

The container CSS variables --aura-radius-md / --aura-radius-lg and text tokens --aura-text / --aura-text-muted are respected too — override them per preset if you want a different feel.

Live showcase

All 8 variants rendered side-by-side, plus a lg example with actions, on demo.aura-ui.com/admin/empty-states-showcase.