Empty state
A centred block shown in place of content that is absent.
Basic
The .empty-state stacks a .empty-state__media (a tinted circle holding one glyph by default), a .empty-state__title, supporting .empty-state__text, and a trailing .empty-state__action. Tone modifiers recolour the media for error or success states; the text stays neutral so the message reads as words. Drop an .illustration, <img>, .icon-box, .avatar, or .spinner into the media slot and it sheds its circle so the richer art isn't double-framed. A glyph, a title, a line of guidance, and a primary action.
With actions
Add .empty-state__action to move the person forward. The slot centers and wraps its controls, so a primary plus a secondary action stacks cleanly on a narrow region.
Tones
Set a tone with .empty-state--danger (an error) or .empty-state--success (a done state); only the media recolours.
Small
.empty-state--sm shrinks the media and tightens the padding for an empty region inside a card or table.
Media
The media slot hosts more than a bare icon. Drop in an .icon-box, an .avatar, or a .spinner and the slot sheds its own circle so the media is never double-framed. A spinner suits a region that is loading toward empty.
With an illustration
For a richer empty state, pair it with an .illustration in the media slot. The slot sheds its circle and caps the art width, so the spot art sits on its own. See the Illustrations page for the full set and how to re-tone them.
Customization
These variables retune the block. Override on the root or any wrapper.
| Variable | Use |
|---|---|
--empty-state-max-width | Measure the block centres within |
--empty-state-padding-block / -padding-inline | Block padding |
--empty-state-tone | Media fill and tint (the tone modifiers set this) |
--empty-state-tone-emphasis | Glyph colour on the media tint; intents set it from --color-<intent>-emphasis for AA contrast |
--empty-state-media-size / -icon-size | Media circle and glyph size |
--empty-state-art-size | Width cap for a richer illustration or image |
--empty-state-media-gap | Gap below the media |
--empty-state-gap | Gap between the title and the text |
--empty-state-action-gap | Gap above the actions |