# What belongs in an empty state?

[Website version](https://patterns.alexanderclaes.com/patterns/empty-states/)

Updated 28 October 2026

Distinguish a fresh start, no matches, loading, and a failed request. They need different responses.

## Recommendation

Explain why this area is empty and offer a useful next step when one exists.

## Problem

There is nothing to show yet.

## Show an empty state when

- A new collection needs its first item.
- A filter combination produced no matches and can be cleared.

## Empty-state mistakes to avoid

- Calling a loading, permission, or request failure 'no items' when data may still exist.
- Adding a create or retry action when there is nothing the user needs to do, such as a queue with no outstanding tasks.
- Filling the space with decoration that hides the explanation or useful action.

## Example

[View the example on the website](https://patterns.alexanderclaes.com/patterns/empty-states/#example).

## Implementation

1. Use a specific heading, such as 'No matching patterns', and keep the message in the affected content region's reading order.
2. For a new collection, offer a create or import action the user can perform. For no results, preserve the query and filters and offer a way to adjust or clear them.
3. Show loading feedback while a request is pending. Explain failures or missing access separately, with a recovery action when available.
4. When a no-results or success message updates without moving focus, expose the message to assistive technology. An existing role="status" container updated with the message is one suitable technique; do not make the whole results area live.
5. An empty state present on initial page load does not need a live region merely because it is empty. If an action removes the focused control, move focus to a logical place in the updated interface.

## Tradeoffs

Examples can explain what belongs in a new collection, but fake content risks being mistaken for real data. Clearly label sample content if you use it.

## Verification

Can users tell whether to create, adjust a query, wait, retry, or do nothing? Verify dynamic announcements and where keyboard focus goes after the state changes.

## References

- [IBM Carbon · Empty states](https://www.carbondesignsystem.com/building-blocks/core/patterns/empty-states)
- [W3C WCAG 2.2 · Status messages](https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html)
- [W3C · Using role=status for status messages](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA22)

## Related patterns

- [Search, filters, or both?](https://patterns.alexanderclaes.com/patterns/search-or-filters.md)
- [What should an error message say?](https://patterns.alexanderclaes.com/patterns/error-recovery.md)