@redrob-labs/ui v1.0.2 · Redrob Group Design System 2026

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

PropTypeNotes
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