EmptyState
Zero-data placeholder with icon, title, description, and an optional action button. Includes 4 semantic variants.
Live Demo
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Main heading (required). |
description | string | — | Supporting text below the title. |
variant | 'default' | 'search' | 'error' | 'no-results' | 'default' | Selects the built-in icon and implied context. |
icon | React.ReactNode | — | Custom icon that overrides the built-in variant icon. |
action | { label: string; onClick: () => void } | — | Primary action button rendered below the description. |
className | string | — | Extra CSS class on the root element. |
Usage
import { EmptyState } from '@ghiberti85/ui'
// Default
<EmptyState
title="No content yet"
description="Get started by creating your first item."
action={{ label: 'Create item', onClick: () => {} }}
/>
// Search empty state
<EmptyState
variant="search"
title="No results found"
description="Try adjusting your search terms."
action={{ label: 'Clear search', onClick: () => setQuery('') }}
/>
// Error state
<EmptyState
variant="error"
title="Something went wrong"
description="We couldn't load this content."
action={{ label: 'Retry', onClick: () => refetch() }}
/>
// Custom icon
<EmptyState
icon={<MyIcon />}
title="Inbox empty"
description="You're all caught up!"
/>