# Empty state · MIAN

What to show when there is nothing to show, with a next step.

- Id: `empty-state` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/empty-state
- Use for: no results, nothing here yet, first use, empty inbox, zero state.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `mn-empty`: Container.
- `mn-empty-icon · mn-empty-title · mn-empty-desc`: Parts.

## Accessibility

- Make the title a heading at the right level so the state is discoverable in the outline.

## Examples

### No projects

```html
<div class="mn-empty" style="max-width:30rem">
  <div class="mn-empty-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1Z"/></svg></div>
  <h3 class="mn-empty-title">No projects yet</h3>
  <p class="mn-empty-desc">Create your first project to start collecting feedback from your team.</p>
  <button class="mn-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> New project</button>
</div>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/empty-state/source