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.

Go to Dashboard

<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 at public > vendor > bladewind > images > empty-state.svg. The default image is used if you leave out the image attribute of the Empty State component. You can use your own images by setting the image attribute. Bladewind searches for your file from the public directory.

You have not saved any gists to your GitHub account

Create Gist

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

Create Gists Now

You have not saved any gists to your GitHub account

Create Gist

<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 show_image="false".

<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 activities list will take shape as
soon as your organization has some activity

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

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"
    size="xl"
    image_css="!h-32"
    class="shadow-sm">
</x-bladewind::empty-state>