components
Empty state
Empty states do three jobs at once — explain why there's nothing to see, tell the user what would change that, and offer the shortest path to fix it.
Read the full specDefault
Icon, title, description and a primary action. The icon is at `size-12` (48px) — large enough to anchor the column without dominating it.
No reports yet
Reports appear when civilians message your WhatsApp number.
import { Inbox } from "lucide-react";
import { Button, EmptyState } from "@wolf/design-system";
<EmptyState
icon={<Inbox className="size-12" />}
title="No reports yet"
description="Reports appear when civilians message your WhatsApp number."
action={<Button>Share WhatsApp link</Button>}
/>Bordered
Dashed-border variant for sections embedded in a page — the border contains the whitespace and makes the empty block feel intentional.
<EmptyState variant="bordered" ... />Search — no results
When the empty state is the result of a filter, name the query in the helper so the user can see what to change.
Nothing matches “bishopscourt”
Try a broader search or clear your filters to see every report.
Inside a card
Empty states also drop neatly into a Card shell when a whole panel is empty.
No team members yet
Invite colleagues to share the dashboard and dispatch duties.