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.
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
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.
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.
Tony Russell-Rose, Tyler Tate, Designing the Search Experience
Whether to display a button which cancels the last available action.
The "Cancel last action" button.
The highlighted query.
The text indicating that no results were found for the search.
The search tips to help the user correct the query.