# rn-empty-state
URL: /docs/native/docyrus/empty-state

Placeholder display for empty content areas with variant-specific icons and actions.

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/rn-empty-state
```

## Usage

```tsx
import { EmptyState } from '@/components/docyrus-native/empty-state';

<EmptyState
  variant="default"
  title="No projects yet"
  description="Create your first project to get started."
  action={{ label: 'Create Project', onPress: () => {} }}
/>
```

## API Reference

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `variant` | `'default' \| 'search' \| 'filter' \| 'error' \| 'offline' \| 'permission' \| 'empty-inbox' \| 'no-data'` | `'default'` | Preset variant with default icon, title, and description |
| `icon` | `ReactNode` | — | Custom icon to display (overrides variant emoji) |
| `title` | `string` | — | Custom title (overrides variant default) |
| `description` | `string` | — | Custom description (overrides variant default) |
| `action` | `EmptyStateAction` | — | Primary action button |
| `secondaryAction` | `EmptyStateAction` | — | Secondary action button (outline style) |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Component size |
| `animated` | `boolean` | `true` | Enable floating animation on the icon |
| `className` | `string` | — | Additional CSS classes |
| `accessibilityLabel` | `string` | — | Accessibility label override |

### EmptyStateAction

| Prop | Type | Description |
|------|------|-------------|
| `label` | `string` | Button text |
| `onPress` | `() => void` | Button press handler |

## Translation Keys

Built-in copy is read through `useUiTranslation()` — provide these keys via `<UiTranslationProvider>`. Without a provider the English fallback is shown.

| Key | English fallback | Used for |
|-----|------------------|----------|
| `ui.emptyState.defaultTitle` | No data available | Title (`title` prop wins); `no-data` uses `default` |
| `ui.emptyState.defaultDescription` | There's no data to display at this time. | Description (`description` prop wins) |
| `ui.emptyState.searchTitle` | No results found | Title (`title` prop wins); `no-data` uses `default` |
| `ui.emptyState.searchDescription` | Try adjusting your search terms or filters. | Description (`description` prop wins) |
| `ui.emptyState.filterTitle` | No matches | Title (`title` prop wins); `no-data` uses `default` |
| `ui.emptyState.filterDescription` | No items match your current filters. | Description (`description` prop wins) |
| `ui.emptyState.errorTitle` | Something went wrong | Title (`title` prop wins); `no-data` uses `default` |
| `ui.emptyState.errorDescription` | We encountered an error loading this content. | Description (`description` prop wins) |
| `ui.emptyState.offlineTitle` | You're offline | Title (`title` prop wins); `no-data` uses `default` |
| `ui.emptyState.offlineDescription` | Check your connection and try again. | Description (`description` prop wins) |
| `ui.emptyState.permissionTitle` | Access restricted | Title (`title` prop wins); `no-data` uses `default` |
| `ui.emptyState.permissionDescription` | You don't have permission to view this content. | Description (`description` prop wins) |
| `ui.emptyState.emptyInboxTitle` | Inbox zero! | Title (`title` prop wins); `no-data` uses `default` |
| `ui.emptyState.emptyInboxDescription` | You're all caught up. Great job! | Description (`description` prop wins) |

## Type Exports

| Type | Description |
|------|-------------|
| `EmptyStateProps` | Props for EmptyState component |
| `EmptyStateVariant` | `'default' \| 'search' \| 'filter' \| 'error' \| 'offline' \| 'permission' \| 'empty-inbox' \| 'no-data'` |
| `EmptyStateSize` | `'sm' \| 'md' \| 'lg'` |
| `EmptyStateAction` | Action button configuration object |