Browse Components
Empty
A clear starting point when there is no content to show.
Basic
A heading, brief guidance, and a next step.
Nothing here yet
Add your first item to get started. It will appear here when you do.
View Code
<section class="empty-state" aria-labelledby="empty-title">
<h2 id="empty-title">
Nothing here yet
</h2>
<p>
Add your first item to get started. It will appear here when you do.
</p>
<div class="cluster">
<button class="btn" type="button">
Add Item
</button>
</div>
</section>With an icon
Place an optional decorative icon above the heading. The text carries the meaning.
Nothing here yet
Add your first item to get started. It will appear here when you do.
View Code
<section class="empty-state" aria-labelledby="empty-icon-title">
<svg
class="icon"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M3 8V6a2 2 0 0 1 2-2h4.1a2 2 0 0 1 1.6.8L12 7h7a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8Z">
</path>
</svg>
<h2 id="empty-icon-title">
Nothing here yet
</h2>
<p>
Add your first item to get started. It will appear here when you do.
</p>
<div class="cluster">
<button class="btn" type="button">
Add Item
</button>
</div>
</section>Installation
Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/empty-state.css">
<link rel="stylesheet" href="/library/assets/button.css">10,701 bytes CSS including base · 0 bytes runtime JavaScript
Usage
Add an optional icon
Place an SVG with class icon before the heading. Use aria-hidden=true and focusable=false when the heading already communicates its meaning. Omit it for a simpler presentation.
Give a clear next step
Use a short heading, a helpful explanation, and one or two relevant actions. Keep actions functional in your application.
Keep it accessible
Choose the appropriate heading level and label the section with aria-labelledby. Avoid live announcements on initial load; announce updates separately when needed.
Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.