Empty State: No Results

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 have been found in their query.

Stable
Show details
Stable
Published: February 21, 2025
Updated: October 13, 2025

Anatomy

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

EmptyStateNoResults-anatomy
  1. Image: Default image that appears.
  2. Heading: Informs the user that ‘no results’ have been found in query.
  3. Description: Provides the user with support and encouragement to perform action.

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.
EmptyStateNoResults
Property Values Default
✏️ heading Text string No results found.
✏️ description Text string Try adjusting your filters or search term.

Help and support