跳到主要内容
版本：Next

Empty State Blade component

Introduction​

An empty state can be used to communicate that there is no content to display yet, and to guide the user towards the next action. A heading is required:

<x-filament::empty-state>
    <x-slot name="heading">
        No users yet
    </x-slot>
</x-filament::empty-state>
An empty state with icon, description and action button

Adding a description to the empty state​

You can add a description below the heading to the empty state by using the description slot:

<x-filament::empty-state>
    <x-slot name="heading">
        No users yet
    </x-slot>

    <x-slot name="description">
        Get started by creating a new user.
    </x-slot>
</x-filament::empty-state>
An empty state with a description

Adding an icon to the empty state​

You can add an icon to an empty state by using the icon attribute:

<x-filament::empty-state
    icon="heroicon-o-user"
>
    <x-slot name="heading">
        No users yet
    </x-slot>
</x-filament::empty-state>

Changing the color of the empty state icon​

By default, the color of the empty state icon is primary. You can change it to be gray, danger, info, success or warning by using the icon-color attribute:

<x-filament::empty-state
    icon="heroicon-o-user"
    icon-color="info"
>
    <x-slot name="heading">
        No users yet
    </x-slot>
</x-filament::empty-state>
An empty state with a colored icon

Changing the size of the empty state icon​

By default, the size of the empty state icon is "large". You can change it to be "small" or "medium" by using the icon-size attribute:

<x-filament::empty-state
    icon="heroicon-m-user"
    icon-size="sm"
>
    <x-slot name="heading">
        No users yet
    </x-slot>
</x-filament::empty-state>

<x-filament::empty-state
    icon="heroicon-m-user"
    icon-size="md"
>
    <x-slot name="heading">
        No users yet
    </x-slot>
</x-filament::empty-state>
Empty states with different icon sizes

You can add actions below the description by using the footer slot. This is useful for placing buttons, like the <x-filament::button> component:

<x-filament::empty-state>
    <x-slot name="heading">
        No users yet
    </x-slot>

    <x-slot name="footer">
        <x-filament::button icon="heroicon-m-plus">
            Create user
        </x-filament::button>
    </x-slot>
</x-filament::empty-state>
An empty state with footer actions

Removing the empty state container​

By default, empty states have a background color, shadow and border. You can remove these styles and just render the content of the empty state without the container using the :contained attribute:

<x-filament::empty-state :contained="false">
    <x-slot name="heading">
        No users yet
    </x-slot>
</x-filament::empty-state>
An empty state without a container