Display a placeholder for no data, empty results and first-run states
EmptyState displays a placeholder for "no data" situations: empty search results, empty tables and lists, first-run states or error illustrations with an optional call to action. The simplest way to use it is with icon , title and description props:
We couldn't find anything matching your search. Try adjusting your filters or searching with different keywords to see more results.
For full control over the content, use compound components instead of (or together with) the shorthand props. Available components:
Shorthand props and compound components can be mixed. When both are provided, the content from icon , title and description props is rendered first, followed by children :
Set the align prop to control how the content is arranged:
Change the align prop in the configurator above to see how it works. With left and right alignment the indicator is aligned to the top of the content.
Set the variant prop to filled or light to display the icon inside a colored circular indicator. Use the color prop to change the indicator color. If variant is not set, the icon is displayed with a dimmed color:
Set withIndicatorBackground prop to display a neutral circular background behind the indicator without setting a variant :
Your shopping cart is empty right now. Browse our catalog and add the items you like to get started with your first order.
EmptyState supports xs , sm , md , lg and xl sizes. The size prop controls the indicator size, gap between elements and font sizes of the title and description. Change the size prop in the configurator above to see how it scales.
By default, EmptyState.Title renders a div element without a semantic heading level. If the empty state title should be a heading, set the order prop to render it as an h1 – h6 element:
EmptyState supports the Styles API ; you can add styles to any inner element of the component with the classNames prop. Follow the Styles API documentation to learn more.
Component Styles API
Hover over selectors to highlight corresponding elements