EmptyState

Feedback · src/components/EmptyState/EmptyState.tsx

Nothing here, and what to do about it.

Three different situations wear this component and they need different words: nothing created yet (say how to start), a filter that matched nothing (say what to relax), and something that failed (say what broke). "No data" covers all three and helps in none of them.

The title is an h3, so the state takes part in the page's heading outline rather than being a styled div a screen reader walks past.

Import

import { EmptyState } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
icon	React.ReactNode	An icon or an Illustration. An Object drawing, not a construction.
title	React.ReactNode
description	React.ReactNode	Why it is empty, and what would fill it.
action	React.ReactNode	The one thing to do about it.
compact	boolean
wash	boolean | 'brand'	A wash behind it. brand for a first-run state worth making an occasion of.
className	string