atomic-no-results
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 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 |
|---|---|---|---|---|
|
|
Whether to display a button which cancels the last available action. |
|
|
Shadow Parts
| Part | Description |
|---|---|
|
The "Cancel last action" button. |
|
The highlighted query. |
|
The magnifying glass icon. |
|
The text indicating that no results were found for the search. |
|
The search tips to help the user correct the query. |
Very useful
Not really
Very useful
Not really