patterns
Empty states
What's empty, why it's empty, what to do. A Wolf empty state always names the next action — never just 'No data.'
Read the full specFirst-time empty — teach the model
The user has never had data here. Describe how data gets in.
No reports yet
Reports appear when civilians message your WhatsApp number.
import { EmptyState } from "@wolf/design-system";
import { Inbox } from "lucide-react";
<EmptyState
variant="bordered"
icon={<Inbox className="size-12" />}
title="No reports yet"
description="Reports appear when civilians message your WhatsApp number."
action={<Button>Share your WhatsApp link</Button>}
/>Filtered empty — offer a reset
User has data but filters hide everything. The action clears the filter.
No reports match these filters
Try broader criteria, or clear the filter to see everything in the feed.
Zero-results search
Same shape as filtered empty, tuned for a search miss.
No results for "khayelitsha"
Check spelling, or try a nearby area name.
Feature not enabled — explain the gate
Not empty — locked. Name the add-on and point to pricing.
Patrol data is part of the Patrol Management add-on
Add it to your plan to start seeing routes, checkpoints and completions.
Voice checklist
Per the voice-and-tone spec §5.2 — one action, no blame, never cute.
Good
No areas monitored yet. Add one to start seeing civilian activity.
Avoid
Oops, nothing here!
Good
No reports in your area yet. Reports appear when civilians message the WhatsApp number.
Avoid
No data available.
Good
No guards assigned. Invite a teammate to start.
Avoid
You haven't set up any guards.
Icon choice — match the concept
Pick by meaning, not decoration. The icon prepares the reader for what's missing.