EmptyState
A centred placeholder for the moments when there is nothing to show: an empty list, a search with no results, a first-run screen. It explains why and offers the next step.
No invoices yet
Invoices you create or receive will show up here.
<EmptyState
icon={<InboxIcon />}
title="No invoices yet"
description="Invoices you create or receive will show up here."
action={<Button variant="primary" leadingIcon={<PlusIcon />}>New invoice</Button>}
/>Import
import { EmptyState } from "@merid/react";Examples
Plain
variant="plain" drops the tray background — use it inside a card or table frame that already has a surface. titleLevel sets the heading level to fit the page outline.
No results for “quarterly”
Try a shorter search or check the spelling.
<EmptyState
variant="plain"
icon={<SearchIcon />}
title="No results for “quarterly”"
description="Try a shorter search or check the spelling."
action={<Button>Clear search</Button>}
titleLevel={2}
/>Title only
Only title is required.
Nothing to review
<EmptyState title="Nothing to review" />API reference
Renders a div; the ref and other div attributes are forwarded (the native title attribute is replaced by the title prop).
| Prop | Type | Default | Description |
|---|---|---|---|
titleRequired | ReactNode | – | Short headline, e.g. "No invoices yet". |
description | ReactNode | – | One or two sentences explaining what to do next. |
icon | ReactNode | – | Icon shown in a soft accent tile. Decorative. |
action | ReactNode | – | Primary action(s), usually a Button. |
titleLevel | 1 | 2 | 3 | 4 | 5 | 6 | 3 | Heading level for title. |
variant | "tray" | "plain" | "tray" | Surface: tray is a recessed panel, plain has no background. |
Styling
| Hook | Values |
|---|---|
.mrd-empty-state | Root; data-variant = tray · plain |
.mrd-empty-state__icon | Accent-soft icon tile |
.mrd-empty-state__title | Heading |
.mrd-empty-state__description | Body text |
.mrd-empty-state__action | Action row |
EmptyState has no component variables.
Accessibility
- The title is a real heading (
h3by default); settitleLevelso it fits the surrounding outline. - The icon is
aria-hidden; the title must carry the meaning on its own. - When the empty state replaces results after a search, announce the change — for example render the result count in a polite live region.
Guidelines
Do
Say what is missing and how to fill it: “No invoices yet” plus a “New invoice” button.
Avoid
Show a bare “No data” or a large illustration with no way forward.