EnterprisePatternsEmpty no-results

Empty no-results

Intentional empty states that reduce abandonment and guide next action when queries return nothing.

UXRecoveryEmpty state

Overview

No results is often a context-setting moment, not an error.

A helpful empty state explains why and gives a clear recovery path within the same goal.

Recover from a meaningful empty result

Live preview

Compare first-use, filtered, and permission-limited outcomes, then use each recommended recovery path without losing page context.

GOVERNANCE

Policy exceptions

Workspace / Production
Environment: ProductionStatus: Expired0 results

No exceptions match these filters

Nothing matches “Production” with status “Expired”. Clear the filters or broaden the environment.

FILTERED RESULTYour search and scope stay available so you can revise them.

Keep the surrounding page context stable; replace only the results region with the empty-state guidance.

Anatomy

Use each piece in this order to keep interpretation and automation consistent.

No exceptions match

Clear a filter or broaden the environment.

View all
Search and scope remain available.12345
  1. 1
    State headline

    Direct statement of current condition.

  2. 2
    Context reason

    Why this empty state is expected or unexpected.

  3. 3
    Primary action

    Most likely path to recover or create content.

  4. 4
    Secondary action

    Alternative route such as clearing filters or changing scope.

  5. 5
    Helpful cues

    Optional examples, tips, or onboarding links.

The ordering here is not visual-only; it reflects interaction priority and expected user cognition. Keep this order unless policy demands a specific domain exception.

When to use

Use this pattern when the user needs guided consistency, state, and reuse at scale.

Recommended

  • Filtered data screens

    Show after scoped criteria returns zero records.

  • Fresh onboarding

    On first visit before data exists, suggest first setup action.

  • Permission filters

    Explain expected emptiness due to role boundaries.

When not to use

Avoid forcing this pattern where simpler, direct interactions are sufficient.

Avoid

  • Loading failures

    Use error states when requests fail.

  • System outages

    Use maintenance or outage messaging.

  • Critical blockers

    Use explicit alerts if action is not possible.

Variants

A small number of variants helps teams choose correctly without adding complexity.

No data yet

Guided creation flow for first-time use.

No match

Shows filter reset and alternative search suggestions.

No access

Explains restrictions and request path.

States

States communicate readiness, risk, and expected user behavior.

StateTriggerVisual responseInteraction
NeutralEmpty without user actionCalm neutral messagePrimary action remains prominent.
FilteredQuery constraints appliedReason + clear-filters actionOne-click reset is available.
Permission-limitedNo matching visible resultsAccess indicator and support hintUser can request broader scope.

Behavior

Behavior should remain predictable across devices, permissions, and async edges.

Filter-aware copy

Copy and actions adjust automatically to active query state.

Primary next step

Keep one primary action and one optional recovery action.

Context help

Offer docs or suggestions only when helpful.

Accessibility

Keep interaction clarity high and ensure assistive technologies get the same meaning.

KeyAction
TabMove to primary action from empty state summary quickly.
EnterActivate the recommended recovery action.
Ctrl/CmdShiftROptional quick reset when supported.
  • Use semantic headings for state title and action area.
  • Keep recovery actions in keyboard order immediately after state text.
  • Announce state changes when filters are applied and cleared.

Content guidelines

Consistency is achieved by language standards, not by design only.

Tone

Use reassuring language; avoid blame.

ExampleNo matches found for those filters yet.

Action clarity

Offer one clear next action.

ExampleCreate first workspace

Context fit

Mention active constraints directly.

ExampleTry removing "Archived" filter.

Examples

Reference implementation style, payloads, and practical behavior.

Production use

  • After a narrow filter, keep the same page structure and add a one-line reason.
  • If role restrictions caused emptiness, include a request-access path.
  • Track empty-state events to identify missing onboarding moments.
Open linked component reference for implementation patterns

Props / API

Use these API entries as a baseline contract and validate them against your domain layer.

These names are implementation-oriented and should map to your local contracts.

Props

PropTypeDefaultDescription
isEmptybooleanfalseExplicit mode flag for empty render logic.
emptyType'fresh' | 'filtered' | 'restricted''fresh'Copies and actions adjust by empty category.
primaryAction() => voidundefinedMain recovery or creation callback.
onResetFilters() => voidundefinedClears constraints in filtered mode.