atomic-no-results

This is for:

Developer

The atomic-no-results component displays search tips and a "Cancel last action" button when there are no results. Any additional content slotted inside of its element will be displayed as well.

Introduction

This component provides feedback to the user by indicating that the query didn’t return any results and guiding them to their next action.

User experience and best practices

Usage notes

Used when the query returns no results. Displaying additional content from this component using a <slot> element is also possible. The <slot> element acts as a placeholder inside the Atomic component, into which you can place your own markup to offer custom content such as messages, images, or links.

Guidelines

Use this opportunity to provide support to your users in the form of advice and tools for query reformulation. If applicable, you should promote exploration and discovery using things like top searches, featured items, or popular items.

Use cases and examples

When displaying a "no results" message on an ecommerce site, displaying popular products that relate to a selected category can help direct the user to a relevant result. It may also help increase sales.

Properties

Property Attribute Description Type Default

enableCancelLastAction

enable-cancel-last-action

Whether to display a button which cancels the last available action.

boolean

true

Shadow Parts

Part Description

cancel-button

The "Cancel last action" button.

highlight

The highlighted query.

icon

The magnifying glass icon.

no-results

The text indicating that no results were found for the search.

search-tips

The search tips to help the user correct the query.