Feedback
Empty
What a view shows when it has nothing to show yet.
On this page
An empty state is what a view shows when it has nothing to show yet. It says what belongs here and offers the action that fills it. It is a centered column with a small well for an icon, and has no surface of its own: put it in a card, a well or straight on the page.
Empty
<div class="well"> <div class="empty"> <div class="empty-media"> <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <path d="M12 16V4M7 9l5-5 5 5M5 20h14" /> </svg> </div> <h3 class="empty-title">No deployments yet</h3> <p class="empty-description">Push to the main branch, or deploy from the dashboard, and the deployment appears here.</p> <div class="empty-actions"> <button type="button" class="btn btn-sm">Read the guide</button> <button type="button" class="btn btn-sm btn-primary">Deploy now</button> </div> </div></div>#After a search
When a filter or a search returns nothing, say what was searched and offer the way back. The media and the actions are optional.
After a search
<div class="empty"> <h3 class="empty-title">No projects match "atlsa"</h3> <p class="empty-description">Check the spelling, or clear the search to see all 12 projects.</p> <div class="empty-actions"> <button type="button" class="btn btn-sm">Clear search</button> </div></div>#Writing one
- The title names the state in plain words: "No deployments yet", not "Nothing here".
- The description says how the view fills, in one or two sentences. It wraps at 24rem.
- Offer one main action. A second, quieter one may lead to documentation.
#Classes
| Class | Description |
|---|---|
empty | The centered column |
empty-media | A well for an icon that names the kind of thing that is missing |
empty-title | The state in plain words, such as "No deployments yet" |
empty-description | How the view fills, in one or two sentences; it wraps at 24rem |
empty-actions | A centered row of buttons |