Empty state

An empty state appears when there is no data to display and describes what the user can do next.

Install

One package and one stylesheet. The stylesheet carries the tokens every component reads.

pnpm add @wolf-rayet/react

import '@wolf-rayet/react/css/wolf-rayet.css';
import { EmptyState } from '@wolf-rayet/react';

A required prop is marked with an asterisk.

Prop	Type	Default	Description
header *	string	—	Says what is not here, in the reader’s words rather than the system’s.
description	ReactNode	—	One or two sentences explaining why it is empty and what would fill it.
primaryAction	ReactNode	—	The one thing to do next. Leave it out when there is nothing the reader can do.
secondaryAction	ReactNode	—	A lesser route, such as documentation. Never the real action.
image	ReactNode	—	An illustration. Optional, and better left out than filled with something meaningless.

What the component does for you, and what it needs from you.

The header is a real heading, so the empty state is reachable by heading navigation like any other section.
The action is a real button or link and is the first thing after the explanation.
An illustration is decorative and is not announced, so nothing it conveys can be left out of the words.