bladewindUI

Empty State

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.

 

Awesome! You have no documents to approve.
                
                    <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.

You have not saved any gists yet to your GitHub account
                
                    <x-bladewind.empty-state 
                        message="You have not saved any gists yet 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.

Create Gists Already
You have not saved any gists yet to your GitHub account
                
                    <x-bladewind.empty-state 
                        message="You have not saved any gists yet 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 show_image="false".

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.


Recent Activities

Your recent activites list will take shape as
soon as your organization has some activty
                
                    <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>
                
            

 

 

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Empty State component.

IMPORTANT: Projects running Laravel 8 please read this

Option Default Available Values
image bladewind/images/empty-state.svg Image to display.
show_image true Specifies whether the image should be displayed or not. Set this to false if you intend to control the entire content of the empty state component. truefalse
button_label blank Text to display on the call to action button.
onclick blank Action to perform when the call to action button is clicked. This could be a block of javascript or a function call. Example: onclick="location.href='/dashboard'" or if you have a javascript helper function for accessing URLs you can do onclick="goToRoute('dashboard')"
heading blank Empty state heading.
message blank Empty state message.
class bw-empty-state Any additonal css classes can be added using this attribute.

 

Empty State with all attributes defined

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

 

The source file for this component is available in resources > views > components > bladewind > empty-state.blade.php

Illustrations used above were taken from https://undraw.co/