# Core/EmptyState - Usage

The EmptyState component is used to display a message when there is no data to display. Illustrations are lazy-loaded and support light/dark themes via the theme prop.

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `illustration` | `(typeof illustrationSlugs)[number]` | No | `--` | The illustration to display, identified by slug. Use theme to switch between light/dark variants when available. @default "EmptyFolder" |
| `theme` | `'light' \| 'dark'` | No | `--` | The theme for the illustration. Determines which variant to show when light/dark variants exist. @default "light" |
| `size` | `'md' \| 'lg'` | No | `--` | The size of the empty state. `lg` is for large components or the whole pages. @default "md" |
| `title` | `string` | Yes | `--` | The title to display in the empty state. |
| `description` | `string` | No | `--` | The description to display in the empty state. Please do not skip this property without a good reason. |
| `children` | `React.ReactNode` | No | `--` | Generic use for adding a button or other action elements below the description. |
| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
| `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |