> ## Documentation Index
> Fetch the complete documentation index at: https://docs.laravelshopper.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# Empty State
> Placeholder component for displaying when no data exists
export const PreviewEmptyState = ({title, content, buttonText, imageSrc}) => {
return
;
};
The Empty State component is used to display a helpful message when there's no data to show. It combines an illustration, title, description, and an optional call-to-action button.
## Preview
## Usage
```blade theme={null}
```
## Props
The main heading text for the empty state.
Descriptive text explaining the empty state and what action can be taken.
Text for the call-to-action button. Set to `false` to hide the button.
Permission name required to show the button. Uses Laravel's `@can` directive.
URL for the button link. Use this for navigation to a create page.
Panel name to dispatch an event for opening a slide-over or modal. Alternative to `url`.
## Examples
### Basic Empty State
```blade theme={null}
```
### With URL Action
```blade theme={null}
```
### With Panel Action
Use a panel action to open a slide-over or modal instead of navigating:
```blade theme={null}
```
### Without Button
When you don't want to show an action button:
```blade theme={null}
```
### Custom Slot Content
The default slot is used for the illustration on the left side:
```blade theme={null}
{{-- Custom SVG or image --}}
```
## Usage in Livewire Components
Empty states are typically rendered conditionally when a collection is empty:
```blade theme={null}
@if ($products->isEmpty())
@else
{{-- Product list/table --}}
@endif
```
## Blade Component Source
The Empty State component is located at `packages/admin/resources/views/components/empty-state.blade.php`:
```blade theme={null}
@props([
'title',
'content',
'button' => false,
'permission' => false,
'url' => false,
'panel' => null,
])
:
}
 }}){kind=spacer}
 }}){kind=spacer}
 }}){kind=spacer}
 }}){kind=spacer}
 }}){kind=spacer}