Index › Patterns › States & Help
4 patterns
When the room is quiet.
The patterns that hold the edges — an empty calendar, a wrong turn, a search across everything, and the keys that move faster than the mouse. Calm scaffolding for the moments between the happy path.
Your calendar is clear for today. Book a client in to see it appear here.
icon + title + description + a ReactNode action. The icon sits in a muted ring; accent fires only on the single primary CTA.
The treatment or booking you’re looking for may have moved, or the link has expired.
role="alert" with a destructive ring, optional code, title, message, and an action slot. The recover button is the route home.
Command inside a Dialog: a CommandInput, facet pills, then CommandGroup headings of CommandItem rows. Accent marks the focused option and the active facet only.
ShortcutOverlay reads every registered shortcut, groups by group, and renders each as a kbd of formatted modifier + key glyphs.
Reach for these when the screen has nothing to show, took a wrong turn, or needs to find one thing across many. EmptyState and ErrorPage are full-surface; FederatedSearchCommand and ShortcutOverlay are app-wide overlays mounted once near the root.
Every dead-end speaks the same way — a calm line, one clear action, never a scolding. Accent appears once per surface: the recover button, the focused result, the active facet.
