Components
Empty states
Explain an empty collection or first-use surface with a clear title, helpful description, icon, and recovery action.
Components
Empty states
An empty state should explain what is absent and offer the most useful next step. It is content presentation, not an error role.
Default empty state
No projects yet
Create your first project to organize tasks and invite collaborators.
HTML · Default empty state
<div class="bs-empty">
<span class="bs-empty-icon" aria-hidden="true"><i data-lucide="plus" class="bs-icon bs-icon-lg" aria-hidden="true"></i></span>
<h2 class="bs-empty-title">No projects yet</h2>
<p class="bs-empty-description">Create your first project.</p>
<div class="bs-empty-actions"><button class="bs-btn bs-btn-primary">Create project</button></div>
</div>Compact empty state
No comments
Start the conversation when you have context to share.
HTML · Compact empty state
<div class="bs-empty bs-empty-compact"><h3 class="bs-empty-title">No comments</h3><p class="bs-empty-description">Start the conversation.</p></div>Multiple recovery paths
HTML · Recovery actions
<div class="bs-empty-actions"><button class="bs-btn bs-btn-primary">Clear filters</button><a class="bs-btn bs-btn-secondary" href="/help">Search help</a></div>Explain the cause
Distinguish first use, an empty collection, and a filtered result with specific copy.
Prioritize one action
Use one primary recovery path and keep optional help secondary.
Do not fake status
Add live-region semantics only when the empty state appears as the result of an asynchronous user action.
Empty-state API
.bs-empty, .bs-empty-compact, .bs-empty-icon, .bs-empty-title, .bs-empty-description, and .bs-empty-actions provide the layout.