Skip to content

Empty State

What to show when there is nothing to show: no data yet, no results, or nothing left to do.

betaSource

No claims yet

When you submit a claim, you can track its status and payments here.

Installation

pnpm add @syntara/react @syntara/tokens
import { EmptyState } from '@syntara/react';

Usage

import { IconFileText } from '@syntara/icons';
import { Button, EmptyState } from '@syntara/react';

export function NoClaims() {
  return (
    <EmptyState
      icon={<IconFileText />}
      title="No claims yet"
      description="When you submit a claim, you can track it here."
      action={<Button>Start a claim</Button>}
    />
  );
}

Examples

Two actions

A primary action and a help link.

Add your family

Dependants you add can use your benefits and submit their own claims.

Who can be added?

In a card

The small size for filtered results inside a card or table.

Transactions

Filtered by: Pharmacy · Last 30 days

No matching transactions

Try a wider date range or remove a filter.

Accessibility

No keyboard interaction of its own.

  • The title is a real heading (h3 by default); pick the level that fits the page outline.
  • The icon is aria-hidden.
  • When the empty state replaces results after a search or filter, announce the change (e.g. a polite status message).

Guidelines

Do

  • Say what will appear here and how to get it.
  • Offer the one action that fills the space.
  • Tell people when filters caused the empty result, and let them clear them.

Don’t

  • Don't blame the user or use jokes in error-adjacent states.
  • Don't add more than two actions.

API reference

EmptyState

titleRequired
ReactNode

What is empty, in plain words.

description
ReactNode

Why it is empty and what to do next. Wraps at 48 characters.

icon
ReactNode

Decorative icon shown in a small raised tile above the title.

action
ReactNode

The next step: usually one Button, optionally with a Link.

size
  • sm
  • mddefault

sm for cards, tables and popovers; md for pages and sections.

level
2 | 3 | 4 | 5 | 6

Heading level of the title.

Default 3

Tokens

The semantic tokens this component reads, grouped by what they control. Swatches show this site’s theme; change a tenant’s brand and the component follows with no code change.

Colour4
border.subtlesurface.raisedtext.defaulttext.subtle
Type8
font.bodyfont.headingfont.size.lgfont.size.mdfont.size.smfont.weight.semiboldline-height.normalline-height.snug
Space and size9
space.1space.2space.3space.4space.5space.6space.8space.10space.12
Shape1
radius.container
Depth2
shadow.raisedhairline
Other2
sheenrim