EmptyState: React component

An empty page is the first thing a new user sees, so it should say what belongs there and offer the one step that puts it there. EmptyState does that in one tag, at three sizes, with a Mascot, a Cube Emote or an icon above it.

Page

No clients yet

Invite a client by email. They fill in their company details once, and every contract reads them from there.

New client

<EmptyState
size="l"
visual={<Mascot size="l" surface="flat" lookAt="pointer" effects={false} />}
title="No clients yet"
description="Invite a client by email. They fill in their company details once, and every contract reads them from there."
action={<Button size="s" prefixIcon="plus" label="New client" />}
/>

Sizes

l is for a whole page with nothing in it yet, m for a card or panel, and s for inside a table, list, select or chart. DataTable's own empty and no-results states use s.

Sizes

No invoices

Invoices show up here once a contract is accepted.

Learn more

No results

Try a different search or filter

Clear filters

<EmptyState
icon="inbox"
title="No invoices"
description="Invoices show up here once a contract is accepted."
secondaryAction={<Button size="s" variant="secondary" label="Learn more" />}
/>

<EmptyState
size="s"
icon="search"
titleAs="h3"
title="No results"
description="Try a different search or filter"
action={<Button size="s" variant="secondary" label="Clear filters" />}
/>

Writing it

The title says what is missing, plainly: "No clients yet", not "Nothing to see here".
The description is one sentence on what fills the space, or what happens next.
One primary action. When the page header has the same button, hide it there while the page is empty, so the step shows once.
A Mascot reads best with surface="flat". A Cube Emote from once-ui.com/emotes goes in visual the same way.

API reference

	Type	Default
visual What sits above the title: a Mascot, a Cube Emote, an illustration. Wins over icon.	ReactNode	—
icon A plain icon above the title, when there is no visual.	IconName	—
titlerequired What is empty, said plainly.	ReactNode	—
description One sentence on what fills it, or what to do next.	ReactNode	—
action The one next step, usually the page's primary button.	ReactNode	—
secondaryAction A second, quieter step.	ReactNode	—
size s inside a table or list, m in a card, l for a whole page.	lms	m
titleAs The title's element.	h1h2h3h4h5h6	h2
…and every FlexProps prop	inherited	—