Empty State

EmptyState is a placeholder for a list or a screen that has no content yet. It shows an icon, a title, an optional description and an optional call to action.

A blank area looks like something failed to load. Use the description to tell the user what belongs here, and the action to help them add the first item.

Example

HTML:

<div if="{hasProjects()}">
    <ul class="list-group mb-3">
        <li foreach="$projects as $project" class="list-group-item">$project</li>
    </ul>
    <button type="button" class="btn btn-outline-secondary" (click)="clearAll">Clear the list</button>
</div>
<EmptyState if="{!hasProjects()}" icon="bi-folder2-open" title="No projects yet"
    description="Projects you create show up here. Add a few to see how the list looks.">
    <slotContent name="action">
        <button type="button" class="btn btn-primary" (click)="addSamples">Add sample projects</button>
    </slotContent>
</EmptyState>

PHP:

<?php

use Viewi\Components\BaseComponent;

class ProjectsPage extends BaseComponent
{
    public array $projects = [];

    public function hasProjects()
    {
        return count($this->projects) > 0;
    }

    public function addSamples()
    {
        $this->projects = ['Website redesign', 'Mobile app', 'Quarterly report'];
    }

    public function clearAll()
    {
        $this->projects = [];
    }
}

Defaults

Without any properties, EmptyState shows an inbox icon and the title "Nothing here yet".

<EmptyState />

Link action

If the action only needs to open another page, set actionText and actionLink. The component renders a primary link button. Use the action slot instead when the button needs a click handler, as in the example above.

<EmptyState
    icon="bi-people"
    title="No members yet"
    description="Invite people to work with you on this project."
    actionText="Invite members"
    actionLink="/members/invite"
/>

No results

When a search filters a list down to nothing, say so and offer to clear the search. Offering to add the first item would be wrong here, since the list is not empty.

<EmptyState icon="bi-search" title="No matches" description="Nothing matched your search. Try a different term.">
    <slotContent name="action">
        <button type="button" class="btn btn-outline-secondary" (click)="clearSearch">Clear search</button>
    </slotContent>
</EmptyState>

Properties

icon - (optional), the icon name shown in the round tile at the top. Default: bi-inbox.

title - (optional), the title text. Default: Nothing here yet.

description - (optional), a line of explanation under the title. Not rendered when empty. Default: `` (empty).

actionText - (optional), the text of the link button. The link is rendered only when both actionText and actionLink are set. Default: `` (empty).

actionLink - (optional), the href of the link button. Default: null.

id - (optional), sets the id of the container.

classList - (optional), extra CSS classes for the container. Default: `` (empty).

Slots

action - (optional), content for the action area under the description, for example a button with a click handler. It renders after the link button if both are set.