Empty state

An empty state appears when there is no data to show. It tells users what they can do next.

Install

One package and one stylesheet. The stylesheet holds the tokens every component uses.

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	None	Says what is missing, in words people use rather than system terms.
description	ReactNode	None	One or two sentences explaining why it is empty and what would fill it.
primaryAction	ReactNode	None	The one thing to do next. Leave it out when there is nothing people can do.
secondaryAction	ReactNode	None	A less important option, such as a link to documentation. Never the main action.
image	ReactNode	None	An illustration. Optional. Leave it out rather than use one that adds nothing.

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.
The illustration is decorative and is not announced. Anything it shows must also be in the text.