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.

Illustrations

EmptyState has no illustration prop. Use ComposedEmptyState when a region needs artwork above the icon well, and pass EmptyStateIllustration from @prepared911/ui/empty-state when you want the same default stroke art ui-core shipped.

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

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.

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

Duration Field / Accessibility

Empty State / API and Development

On this page

Empty state

Usage

Overview

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.

Illustrations

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

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.

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

Duration Field / Accessibility

Empty State / API and Development

On this page