Design system Containers
Empty state
The honest zero: what would be here, and what to do about it. The one legitimate home of the dashed border.
.mk-empty
Overview
The empty state is the honest zero: it says what would be here and what to do about it. It is also the one legitimate home of the dashed border — dashes mean emptiness, and this is the emptiness they mean.
What would be here
Why it is not, in one quiet sentence.
Usage
- Explain an empty content regionName what would normally appear and why nothing is shown now. Do not use an empty state for loading, errors, or filtered results that still require recovery.
- Offer the relevant next stepInclude one action only when the user can create, import, or otherwise populate the missing content from this region.
- Keep it inside its ownerThe empty state replaces the content of one widget, list, or column; unrelated parts of the page remain available.
Anatomy
1
What would be here
Why it is not, in one quiet sentence.
2
- 1The frame. The raised well behind the dashed hairline — the dash vocabulary's own home. Capped at 560px so an empty page does not become an empty billboard.
- 2The registers. The headline reads in body ink — it is still the panel's answer; only the explanation under it is quiet, and the glyph sits one register below the words it decorates.
Variants and states
- With the actA secondary button when there is a way to fill the emptiness now.
- The honest stubA surface that is not built yet names its open question instead of pretending.
- The cap travels560px at most, centred in its zone at every width.
Do and don't
What would be here
Why it is not, and what fills it.
Do
The zero answers: what belongs here, why it is absent, what to do.
No data
Don't
"No data" — the reader knew that already; the panel taught nothing.
Copy
- Headline: what would be hereThe absent thing's own name, in body ink.
- Hint: why, quietlyOne sentence in the quiet voice — the absence register's one legitimate seat.
- A stub names its questionWhat decision or work stands between this surface and existing.
Accessibility
- The glyph is decoration
aria-hidden; the headline is the announcement. - Quiet still clears the floorThe hint's ink is the absence token, tuned to pass on this ground.
When to reach for something else
- An empty slot with a ready actThe zone's own add control — an empty state explains; it does not fill.
- A filtered list with no matchesThe list's own "nothing matches" line, naming the query.
Markup
<div class="mk-empty">
<span class="glyph" aria-hidden="true">◇</span>
<p class="title">What would be here</p>
<p class="hint">Why it is not, in one quiet sentence.</p>
<button class="mk-btn mk-btn-secondary mk-btn-s mk-btn-inline" type="button">
The way to fill it
</button>
</div>