Visual Components
Empty State Card
Full-page empty state for zero-data screens. Combines an illustration slot, a headline, a body copy line, and up to two CTA buttons. Six built-in states: Zero Search, No Orders, Error, Success, Warning, and a generic Lottie slot.
V 1.0View in Storybook
Controls
State
Title override
Body override
Show actions
Variants
Props
Code
import { EmptyStateCard } from '@/src/components/Visual/EmptyStateCard'
// Zero Search — no results found
<EmptyStateCard type="zero-search" />
// No Orders — empty order history
<EmptyStateCard type="zero-orders" />
// Error state
<EmptyStateCard type="error" />
// Success state
<EmptyStateCard type="success" />
// Warning state
<EmptyStateCard type="warning" />
// Lottie slot — generic illustration
<EmptyStateCard type="lottie" />
// Custom title, body and actions
<EmptyStateCard
type="zero-search"
title="No results found"
body="Try adjusting your filters or search terms."
actions={[
{ label: 'Clear filters', variant: 'outlined', onClick: () => {} },
{ label: 'Go home', variant: 'primary', onClick: () => {} },
]}
/>
// Hide actions entirely
<EmptyStateCard type="error" actions={[]} />