Empty State: No Results

Informs users that no results were found in their query.

Stable
Show details
Stable
Published: February 21, 2025
Updated: January 22, 2026

Empty states are used to communicate when a component has no content to display.

The “No Results” empty state informs the users that no results were found in their query.


Anatomy

Anatomy summary lists and describes all the elements that exist within a component (including other components nested within).

emptyStateNoResults-anatomy

Element

Description

Optional?

1. Image

Default image.

No

2. Heading

Informs the user that ‘no results’ have been found in query.

No

3. Description

Supports the user by encouraging them to adjust their query to find results.

No


Variants

Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.

EmptyStateNoResults
EmptyStateNoResults
Displayed when a user enters a search or filter query that returns nothing. It features a standard message that is repeatable and easily identified by users.

Component dependencies

This component is internally dependent on the following components:


Help and support