Empty-state
Centered explanation for a region with nothing in it yet (empty backlog, no search results, no notifications): optional illustration circle, a title, subtle description text, and a row of next-step actions. Max 460px wide, centered in its container.
Root: .empty-state on <div>, <section>
Examples
Example 1
The backlog is empty
Create issues to plan your next sprint.
<div class="empty-state"><div class="empty-state-media"><span aria-hidden="true">∅</span></div><h3 class="empty-state-title">The backlog is empty</h3><p class="empty-state-description">Create issues to plan your next sprint.</p><div class="empty-state-actions"><button class="btn btn-primary">Create issue</button><button class="btn btn-subtle">Import issues</button></div></div>Example 2
No results
Try a different search term.
<div class="empty-state"><h3 class="empty-state-title">No results</h3><p class="empty-state-description">Try a different search term.</p></div>Contract
Structure
| Selector | Required | Description |
|---|---|---|
.empty-state-media | optional | Optional leading illustration slot. Default look is a 96px sunken circle holding one large glyph span; an <img> or inline <svg> can replace the glyph. |
.empty-state-title | required | The headline (h500 scale). Use a real heading element at the level that fits the page outline. |
.empty-state-description | optional | Subtle supporting copy under the title. |
.empty-state-actions | optional | Centered row (8px gap) of next-step actions — typically one .btn-primary plus a .btn-subtle. |
Accessibility
Use a real heading element for .empty-state-title so the state participates in the page outline. The default media glyph is decorative — mark it aria-hidden="true" (an <img> illustration should instead get alt="" when purely decorative). Actions must be real buttons or links; lead with the primary next step.
Nesting
Allowed in:
page content.card-body.board-column-cards.drawer-body.modal-body
Never inside (or containing):
.empty-state