Display this when there is nothing to display. This prevents your users from seeing boring blank pages with one liners like "no users to display". Similar to all the other BladewindUI components, the empty state component has been kept very minimal, bearing in mind that different users have different empty state preferences. In fact, each application will have its own specific empty state requirements.
<x-bladewind.empty-state message="Awesome! You have no documents to approve." button_label="Go to Dashboard" onclick="alert('you clicked me')"> </x-bladewind.empty-state>
The above example uses the default empty state image that comes bundled with BladewindUI. This image is available in the
public > bladewind > images > empty-state.svg directory.
The default image is used if you leave out the
image="" attribute of the Empty State component.
<x-bladewind.empty-state message="You have not saved any gists to your GitHub account" image="/assets/images/no-code.svg" button_label="Create Gist" onclick="alert('you clicked me')"> </x-bladewind.empty-state>
There are times you will want your empty state to have a heading to let the user know immediately what is happening, without having to read the full message.
To achieve this set the
heading attribute of the Empty State component.
<x-bladewind.empty-state message="You have not saved any gists to your GitHub account" heading="Create Gists Already" image="/assets/images/no-code.svg" button_label="Create Gist" onclick="alert('you clicked me')"> </x-bladewind.empty-state>
The examples above use the attributes of the empty state component to build the empty state content. It is also possible to ignore all attributes and dump your content right in to the empty state component.
In this case you will need to set
You have no biometric data available
<x-bladewind.empty-state show_image="false"> <svg> ... </svg> <p class="pt-2">You have no biometric data available</p> <x-bladewind.button color="red" size="small"> Add biometric info </x-bladewind.button> </x-bladewind.empty-state>
You can also have empty states with no call to action buttons. For example, a "Recent Activities" section that fills up when users perform activities throughtout the app. An empty state for a case like that will necessarily need no action to be performed.
To achieve this, you should leave out the
button_label attribute or set it to an empty string.
<x-bladewind.card title="Recent Activities" css="w-3/4 mx-auto"> <br /> <x-bladewind.empty-state image="/assets/images/no-activity.svg" message="Your recent activites list will take shape as <br/> soon as your organization has some activty"> </x-bladewind.empty-state> </x-bladewind.card>
The table below shows a comprehensive list of all the attributes available for the Empty State component.
|image||bladewind/images/empty-state.svg||Image to display.|
|show_image||true||Specifies whether the image should be displayed or not. Set this to
|button_label||blank||Text to display on the call to action button.|
|heading||blank||Empty state heading.|
|message||blank||Empty state message.|
|class||bw-empty-state||Any additonal css classes can be added using this attribute.|
<x-bladewind.empty-state message="Hey!! You cleaned up your inbox nicely" button_label="Compose a message" onclick="goToRoute('new-message')" image="/assets/images/empty-inbox.png" show_image="true" heading="Nothing to see here" class="shadow-sm"> </x-bladewind.empty-state>
resources > views > components > bladewind > empty-state.blade.php