> ## Documentation Index
> Fetch the complete documentation index at: https://filament-34a8cf01.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Empty State Blade component

> [!WARNING]
>
> You are currently viewing the documentation for Filament 4.x, which is a previous version of Filament.
>
> Looking for the current stable version? Visit the [5.x documentation](https://filament-34a8cf01.mintlify.site/5.x/components/empty-state.md).

## 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:

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::empty-state>
    <x-slot name="heading">
        No users yet
    </x-slot>
</x-filament::empty-state>
```

Loading preview

![An empty state with icon, description and action button](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/empty-state/simple.jpg)

## Adding a description to the empty state

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

```blade theme={"theme":"gruvbox-dark-hard"}
<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>
```

Loading preview

![An empty state with a description](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/empty-state/description.jpg)

## Adding an icon to the empty state

You can add an [icon](https://filament-34a8cf01.mintlify.site/4.x/styling/icons.md) to an empty state by using the `icon` attribute:

```blade theme={"theme":"gruvbox-dark-hard"}
<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:

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::empty-state
    icon="heroicon-o-user"
    icon-color="info"
>
    <x-slot name="heading">
        No users yet
    </x-slot>
</x-filament::empty-state>
```

Loading preview

![An empty state with a colored icon](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/empty-state/icon-color.jpg)

### 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:

```blade theme={"theme":"gruvbox-dark-hard"}
<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>
```

Loading preview

![Empty states with different icon sizes](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/empty-state/icon-sizes.jpg)

## Adding footer actions to the empty state

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

```blade theme={"theme":"gruvbox-dark-hard"}
<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>
```

Loading preview

![An empty state with footer actions](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/empty-state/actions.jpg)

## 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:

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::empty-state :contained="false">
    <x-slot name="heading">
        No users yet
    </x-slot>
</x-filament::empty-state>
```

Loading preview

![An empty state without a container](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/empty-state/not-contained.jpg)

[Edit this page on GitHub](https://github.com/filamentphp/filament/edit/4.x/docs/12-components/03-empty-state.md)

## Sponsored by

[Your logo here](https://github.com/sponsors/danharrin)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.