atomic-no-results

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 guides 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, which you can place your own markup to offer custom messages, images, links, etc.

Guidelines

Use this opportunity to provide support to your users in the form of advice and tools for query reformulation. If applicable, promote exploration and discovery through top searches, featured items, popular items, etc.

Use Cases and Examples

When displaying a no results message in a commerce site, displaying popular products that relate to a selected category can help direct the user to a relevant result, as well as increased 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.

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.

What's Next for Me?