EmptyState

What to show when there's nothing yet.

JavaScript off: what the HTML and CSS do on their own.

What to show when there's nothing yet: no results, an empty inbox, a first-run screen. An icon, a title, a line of explanation and the action that fills it. Centered; no script.

Usage

razor

<EmptyState Icon="Lucide.Inbox" Title="No invoices yet" Description="Invoices you send appear here.">
    <EmptyStateActions><Button Href="/invoices/new">New invoice</Button></EmptyStateActions>
</EmptyState>

Icon, title and actions

Use Icon, Title and Description to say why it's empty, and EmptyStateActions for what fills it.

Preview Code

Preview

No invoices yet

Invoices you send appear here, with their payment status.

Code

Actions.razor

<EmptyState Icon="Lucide.Inbox" Title="No invoices yet" Description="Invoices you send appear here, with their payment status.">
    <EmptyStateActions>
        <Button StartIcon="Lucide.Plus">New invoice</Button>
        <Button Variant="ButtonVariant.Outline" Accent="Accent.Neutral" StartIcon="Lucide.Upload">Import CSV</Button>
    </EmptyStateActions>
</EmptyState>

Bordered and small

Use Bordered for an empty area inside a page, and Size for a smaller one.

Preview Code

Preview

No files

Drop files here, or upload them from your computer.

No results for “quarterly”

Try a different word, or clear the filters.

Code

Bordered.razor

<Grid Columns="new() { Base = 1, Md = 2 }" Gap="4" Grow>
    <EmptyState Bordered Icon="Lucide.FolderOpen" Title="No files" Description="Drop files here, or upload them from your computer." />
    <EmptyState Bordered Size="ControlSize.Sm" Icon="Lucide.SearchX" Title="No results for “quarterly”" Description="Try a different word, or clear the filters.">
        <EmptyStateActions>
            <Button Variant="ButtonVariant.Outline" Accent="Accent.Neutral" Size="ControlSize.Sm">Clear filters</Button>
        </EmptyStateActions>
    </EmptyState>
</Grid>

Parts

Written inside EmptyState. The API page lists their parameters.

EmptyStateActions: the buttons or links that fill an EmptyState, such as "New invoice" or "Clear filters".

Mode support

What works in each mode, EmptyState
Feature	Off	Static	Live
Everything	Yes	Yes	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Accessibility

Title is a heading, an h3 by default; set TitleLevel to fit the page's outline.
The icon is hidden from screen readers.
It isn't a live region: when a search empties a list, screen readers aren't told, so announce the result yourself if it matters.

Parameters

EmptyState parameters
Prop	Type	Default
`Icon`An icon above the title, in a tinted circle.	`IconData?`
`Title`The heading, such as "No results".	`string?`
`TitleLevel`The heading level of Title, 1 to 6.	`int`	`3`
`Description`A muted line under the title saying why it's empty or what to do.	`string?`
`ChildContent`Anything else, below the description, such as a list of suggestions, and any EmptyStateActions.	`RenderFragment?`
`Bordered`A dashed border around it, for an empty area inside a page.	`bool`	`false`
`Size`Icon, text size and spacing.	`ControlSize`	`ControlSize.Md`

Plus 25 surface props, 16 item props and 4 common props.

Full API