EmptyState
Centered fallback state for empty results, empty carts, empty wishlists, and similar zero-data moments. Supports presets or fully custom copy with optional CTA.
Best for
Import
import { EmptyState } from "@enadhq/enad-react-sdk/client/storefront"When to use it
Use EmptyState when a view has no data to show: empty cart, empty wishlist, no search results, no reviews, or end of a paginated list. It provides a centered fallback with a message and optional recovery action.
Composition notes
EmptyState works in two modes:
- Preset mode: pass a
variantlike"empty-cart","no-results","no-reviews","no-wishlist", or"end-of-list"to get built-in copy. - Custom mode: pass
title,description, and optionallyiconfor fully custom messaging. actionis a ReactNode slot for a CTA button that helps the visitor recover (e.g., "Continue shopping", "Clear filters").
Both modes can be combined: a preset variant provides default copy, and custom props override specific fields.
Behavior and theming guidance
The component centers its content vertically and horizontally with generous padding. Keep the title short and the description actionable. The recovery action should always give visitors a clear next step.
Examples
Live examples you can edit directly in the sandbox.
Preset empty cart
Use a built-in preset when you want consistent cart copy with a single recovery action.
Custom no-results state
Override the title and body when search or filter flows need more specific guidance.
Component Sets
Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | string | — | Use a preset for default title/description |
| icon | string | — | Custom icon or illustration slot |
| title | string | — | No description yet. |
| description | string | — | No description yet. |
| action | string | — | CTA button or link |
| className | string | — | No description yet. |