Empty states that teach

Use the empty screen to explain what will appear and to offer the first action, not to say “No data”.

No leave requests yet

New requests from your team appear here.

The problem

A blank table with “No data” is a dead end. New users don't know what the screen is for, and returning users can't tell if the list is empty, filtered or broken.

When to use it

Use it for

First use: nothing has been created yet.
No results: a search or filter matched nothing.
Cleared: everything is done, like an empty inbox.

Not for

Errors: the list failed to load. Use an Alert with a retry instead.
Loading: show a Skeleton, not an empty state that flashes first.

Anatomy

IconHints at the content, such as an inbox. Decorative.
TitleWhat's missing, in plain words: “No leave requests yet”.
DescriptionWhat will appear here and why it's empty.
Primary actionThe first step: “New request”. Leave it out if the person can't act.
Secondary actionA way out of a no-results state: “Clear filters”.

How to build it

Work out which of the three kinds of empty it is: first use, no results or cleared.
First use: replace the whole data region, not just the rows. No column headers, toolbar or pagination: they describe data that doesn't exist yet.
First use: say what the screen is for and what happens after the first action, and put that action in the empty state itself, not only in a corner of the header.
No results: keep the headers and toolbar, repeat the query or filters, and offer to clear them.
Cleared: confirm it's done. No action needed.
Give it room: a bordered surface card with 48 to 64 px above and below, near the top of the page, at the width the content would have.

app.tsx

import { Button, EmptyState } from "@nexera-ui/react";
import { LuInbox, LuPlus } from "react-icons/lu";

<EmptyState
  icon={<LuInbox />}
  title="No leave requests yet"
  description="New requests from your team appear here."
  primaryAction={<Button leadingIcon={<LuPlus />}>New request</Button>}
/>

Accessibility

The title is a heading, so screen reader users can find it.
The icon is decorative and hidden from assistive technology.
After a filter empties the list, the change is announced politely.

Do and don't

DoExplain what will appear here and offer the first action.

Don'tShow “No data” and nothing else.

DoSay which search or filter returned nothing.

Don'tUse the same empty state for first use and for no results.

DoShow an error with a retry when loading failed.

Don'tShow an empty state when the request failed.

DoOn first use, show the empty state in place of the table, with the create action in it.

Don'tPut “No users yet” under empty column headers, with the only button in the header.