Prepared Docs

Prepared Docs

⌘K

    Loading navigation…

User

  1. Components
  2. Empty State
  3. Usage

Empty state

Usage

Overview

EmptyState explains why a region is empty and what operators can do next—no results, no permissions, not yet configured. It prevents blank canvases that read as broken and follows the platform norm that empty views should teach and invite action, not dead-end the workflow. Dispatch surfaces this across queue filters, integrations setup, and fresh supervisor consoles.

No incidents in the review queue

New incidents flagged for QA will appear here once callers are routed through this PSAP.

When to use

  • First-time setup panels (integrations, queues) before any data exists.
  • Filtered lists with zero matches—offer reset filters or a broader search.
  • Post-remediation views where the dataset is legitimately empty now.

When not to use

  • Loading—use skeletons or a spinner.
  • Inline placeholder text inside individual fields—use EmptyText.
  • Background processes expected to populate quickly—defer the empty UI until a timeout threshold.

Content guidelines

  • Titles name the situation specifically ("No incidents match these filters"); descriptions suggest a next step. Localize via formatMessage.
  • CTA labels are verbs ("Create queue", "Clear filters"). Avoid blame or vague phrases like "Something went wrong".

Actions

Empty states earn a CTA cluster because the whole purpose is to invite action.

  • Primary action recovers the situation ("Clear filters") or creates the first record ("Create queue").
  • Secondary action links to docs or configuration when setup is the blocker.
  • Keep the cluster short—usually one primary and at most one secondary.

Behavior and states

  • Differentiate empty, error, and permission-denied states. Do not reuse one generic illustration for all three.
  • Keep mobile layouts tappable with adequate spacing around actions.

Best practices

Do

  • Align empty-state navigation suggestions with the sidebar and command-palette destinations so operators don't get whipsawed between vocabularies.
  • Keep tone calm. Emergency operations tools should never joke during failures.

Don't

  • Hide the only path to fix configuration—surface the settings link or docs hand-off.
  • Nest an empty state inside another empty state. Fix the data-fetch bug instead.

Accessibility

Actions are keyboard reachable; illustrations are marked decorative when redundant with the accompanying text. See Accessibility for the full contract.

Related Components

  • Empty text for field-level placeholders.
  • Callout for blocking configuration errors.
  • Data table for table-specific empty patterns.

Previous

Drawer / Accessibility

Next

Empty State / API and Development

On this page

Overview
When to use
When not to use
Content guidelines
Actions
Behavior and states
Best practices
Accessibility
Related Components