Empty States

An empty state replaces a list, table, or panel when there's nothing to show. The recurring shape is a vertically-stacked column with centered content -- an optional icon, a short heading, a brief explanation, and sometimes an action that gets the user past the empty state. brio composes this from .center + .stack.is-centered + .text-center; no dedicated component class needed.

Search with no results

No results found

Try adjusting your search terms or removing one of the filters.

Clear filters

<docs-resize>
    <div class="center stack is-centered text-center" style="--center-max: 28rem; padding-block: var(--space-xl)">
        <span class="text-subtle">
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
            </svg>
        </span>
        <h3>No results found</h3>
        <p class="text-muted">Try adjusting your search terms or removing one of the filters.</p>
        <a class="button is-primary" href="#">Clear filters</a>
    </div>
</docs-resize>

All caught up

You're all caught up

No new notifications since you last checked.

<docs-resize>
    <div class="card">
        <div class="center stack is-centered text-center" style="--center-max: 24rem">
            <span class="text-subtle">
                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M20 6 9 17l-5-5"></path>
                </svg>
            </span>
            <h3>You&#39;re all caught up</h3>
            <p class="text-muted">No new notifications since you last checked.</p>
        </div>
    </div>
</docs-resize>

First-run blank slate

Upload your first file

Drop a file anywhere on this page, or pick one from your computer to get started.

Choose a file Read the docs

<docs-resize>
    <div class="center stack is-centered text-center" style="--center-max: 32rem; padding-block: var(--space-2xl)">
        <span class="text-subtle">
            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                <polyline points="17 8 12 3 7 8"></polyline>
                <line x1="12" y1="3" x2="12" y2="15"></line>
            </svg>
        </span>
        <h2>Upload your first file</h2>
        <p class="text-muted">Drop a file anywhere on this page, or pick one from your computer to get started.</p>
        <div class="cluster is-center">
            <a class="button is-primary" href="#">Choose a file</a>
            <a class="button" href="#">Read the docs</a>
        </div>
    </div>
</docs-resize>

Error recovery

The same shape covers error states -- a failed fetch, a broken integration, a missing permission. Reach for --color-danger on the icon when the empty state is a problem the user might fix.

Couldn't load your projects

Something went wrong on our end. Try again, or come back in a few minutes.

<docs-resize>
    <div class="center stack is-centered text-center" style="--center-max: 28rem; padding-block: var(--space-xl)">
        <span class="text-danger">
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="12" y1="8" x2="12" y2="12"></line>
                <line x1="12" y1="16" x2="12.01" y2="16"></line>
            </svg>
        </span>
        <h3>Couldn&#39;t load your projects</h3>
        <p class="text-muted">Something went wrong on our end. Try again, or come back in a few minutes.</p>
        <button type="button" class="button">Retry</button>
    </div>
</docs-resize>