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:Adding a description to the empty state
You can add a description below the heading to the empty state by using thedescription slot:
Adding an icon to the empty state
You can add an icon to an empty state by using theicon attribute:
Changing the color of the empty state icon
By default, the color of the empty state icon isprimary. You can change it to be gray, danger, info, success or warning by using the icon-color attribute:
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 theicon-size attribute:
Adding footer actions to the empty state
You can add actions below the description by using thefooter slot. This is useful for placing buttons, like the <x-filament::button> component:
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: