# Empty state

What a list or panel shows when it has nothing: first use, no results for a filter, or no permission. Says what is missing and offers the one next step.

- **Group:** Status and feedback · **family:** `status-feedback` · **shadcn:** composed
- **Build:** No shadcn primitive: a small `EmptyState` component composed of `Button`.
- **In apps/admin today:** Not in apps/admin as a shared component.
- **Client component:** no. 

## Content rules

- Title: "No cloths match these filters". Body: name the filters. Action: "Clear filters".
- First use: "No products yet" + "Add from Global Store".

## Do

- Keep the toolbar so filters can be changed.

## Don't

- A grey placeholder box.
- Mascots or jokes.

## Accessibility

- **ARIA:** Heading level follows the page outline (usually h3).
- **Keyboard:** Actions are buttons.
- **Focus:** After Clear filters, focus returns to the search field.

## Tokens

`--s-2` `--s-12` `--s-6` `--w-semibold` `--text-section` `--font-voice` `--font-stretch-title` `--tr-section` `--text-body` `--lh-body` `--muted-foreground` `--s-3` `--text-small` `--s-4` `--success`

## Files

`empty-state.html` live specimen · `empty-state.css` kit rules · `empty-state.d.ts` props · full page: `docs/components/empty-state/` (phone: `m/`).