Empty

# Brok UI: Empty (`empty`)

Empty state for when there is no data to display.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add empty
```

## Usage

```blade
<x-ui.empty>
    <x-ui.empty.header>
        <x-ui.empty.media variant="icon">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z" />
            </svg>
        </x-ui.empty.media>
        <x-ui.empty.title>{{ __('No projects yet') }}</x-ui.empty.title>
        <x-ui.empty.description>{{ __('Create your first project to get started.') }}</x-ui.empty.description>
    </x-ui.empty.header>
    <x-ui.empty.content>
        <x-ui.button>{{ __('Create project') }}</x-ui.button>
    </x-ui.empty.content>
</x-ui.empty>
```

## Props

- `variant` (default|outline|plain|icon|destructive|quiet, default `default', 'size' => 'default', 'placement' => 'center`) — Container style: default (dashed border), outline (solid border and card surface), or plain (no border). On empty.media: default (bare), icon (muted tile), outline, destructive, or quiet (no tile, only the icon in a softened muted tone at 24, 32 or 40px for sm, default or lg).
- `as` (string, default `div`) — Declared by @props in the registry Blade source.

## Use when

- Use to explain a blank state and show the next action.
- Replacing a list, table, or search result with a centered message and icon when there is no data to show.
- Needing consistent header, media, title, description, and content sub-components for empty, no-results, and error states.

## Avoid when

- Do not leave an empty screen without orientation or a recovery path.
- Always explain what belongs here and what the user should do next.
- Showing a full-page loading placeholder before data arrives; use skeleton instead.
- Announcing a transient status change; use status or a toast instead.

## Anti-patterns

- Showing a blank surface without explanation or action

## Rules

- Use the `<brok:empty>` tag (or `<x-ui.empty>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/empty
- Registry JSON (files, props, contract): https://brokui.dev/r/open/empty.json

@props(['variant' => 'default', 'size' => 'default', 'placement' => 'center'])

@php
    $styles = require base_path(config('ui.component_path', 'resources/views/components/ui').'/_styles.php');
    $variant = $styles['normalizeVariant']($variant);
    $variants = [
        'default' => 'border border-dashed border-border bg-transparent',
        'outline' => 'border border-border bg-card',
        'plain' => 'border-0 bg-transparent',
    ];

    $sizes = [
        'sm' => 'gap-4 p-4 md:p-8',
        // `md` is the house default-size token; `default` is kept as an alias so
        // existing `size="default"` usage stays valid (shared map value).
        'md' => 'gap-6 p-6 md:p-12',
        'default' => 'gap-6 p-6 md:p-12',
        'lg' => 'gap-8 p-10 md:p-16',
    ];

    // `upper` sits the content optically above the middle: two empty flex
    // spacers share the free height 2:3, so the content starts at about 40%.
    $placements = [
        'center' => 'justify-center',
        'upper' => "justify-start before:grow-2 before:content-[''] after:grow-3 after:content-['']",
    ];
    $placement = array_key_exists($placement, $placements) ? $placement : 'center';

    $classes = 'flex min-w-0 flex-1 flex-col items-center rounded-lg text-center text-balance '
        . $placements[$placement] . ' '
        . ($variants[$variant] ?? $variants['default']) . ' '
        . ($sizes[$size] ?? $sizes['default']);
@endphp

<div data-slot="empty" data-variant="{{ $variant }}" data-size="{{ $size }}" data-placement="{{ $placement }}" {{ $attributes->merge(['class' => $classes]) }}>{{ $slot }}</div>

@props(['variant' => 'default', 'size' => 'default'])

@php
    $styles = require base_path(config('ui.component_path', 'resources/views/components/ui').'/_styles.php');
    $variant = $styles['normalizeVariant']($variant);
    $sizes = [
        'sm' => 'size-8 [&_svg]:size-5',
        'default' => 'size-10 [&_svg]:size-6',
        'lg' => 'size-12 [&_svg]:size-7',
    ];

    $shell = 'flex shrink-0 items-center justify-center rounded-lg ' . ($sizes[$size] ?? $sizes['default']);

    $variants = [
        'default' => 'bg-transparent',
        'icon' => $shell . ' bg-muted text-foreground',
        'outline' => $shell . ' border border-border bg-background text-foreground',
        'destructive' => $shell . ' bg-destructive/10 text-destructive',
    ];

    // `quiet`: no tile, only the icon in a softened muted tone at 24/32/40px.
    // The stroke comes from the icon itself.
    $quietSizes = [
        'sm' => '[&_svg]:size-6',
        'default' => '[&_svg]:size-8',
        'lg' => '[&_svg]:size-10',
    ];
    $variants['quiet'] = 'flex shrink-0 items-center justify-center text-muted-foreground/70 ' . ($quietSizes[$size] ?? $quietSizes['default']);

    $classes = 'mb-2 ' . ($variants[$variant] ?? $variants['default']);

    if ($variant === 'default') {
        $classes = 'flex shrink-0 items-center justify-center mb-2 bg-transparent';
    }
@endphp

<div data-slot="empty-media" data-variant="{{ $variant }}" data-size="{{ $size }}" aria-hidden="true" {{ $attributes->merge(['class' => $classes]) }}>{{ $slot }}</div>