Actions and feedback
Empty state
A friendly placeholder for empty lists and search results, with an icon, text and actions.
Example
<div class="empty-state empty-state-bordered">
<div class="empty-state-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="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1z"/></svg></div>
<h3 class="empty-state-title">No projects yet</h3>
<p class="empty-state-description">Create your first project to start tracking work with your team.</p>
<div class="empty-state-actions">
<button class="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>
<button class="btn btn-outline btn-neutral">Import</button>
</div>
</div>Classes
6 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.
| Class | Type | What it does |
|---|---|---|
| Base | Base class of the empty state. On a <div> in the example. Sets flex display, alignment, gap, padding and text style.CSS |
|
| Modifier | Modifier, combined with the empty-state class. On a <div> in the example. Sets border and corner radius.CSS |
|
| Part | Part of the empty state. On a <div> in the example. Sets grid display, alignment, width, height, margin and border.CSS |
|
| Part | Part of the empty state. On a <h3> in the example. Sets text color, text size and font weight.CSS |
|
| Part | Part of the empty state. On a <p> in the example. Sets width, text color, text size and text style.CSS |
|
| Part | Part of the empty state. On a <div> in the example. Sets flex display, alignment, gap and margin.CSS |
Usage
Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<!-- Empty state: start from the base class, then add modifiers -->
<div class="empty-state empty-state-bordered">
<div class="empty-state-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="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1z"/></svg></div>
<h3 class="empty-state-title">No projects yet</h3>
<p class="empty-state-description">Create your first project to start tracking work with your team.</p>
<div class="empty-state-actions">
<button class="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>
<button class="btn btn-outline btn-neutral">Import</button>
</div>
</div>Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.
Accessibility
- Use
buttonfor actions andafor navigation. Icon only buttons need anaria-label; decorative icons carryaria-hidden="true". - Every interactive part shows a visible focus ring with
:focus-visible, and tone colors pair with-foregroundtokens that keep text at 4.5:1 or better in light and dark mode.