Docs draft
EmptyState
Component storyFigma component ↗React component ↗DSDS entity ↗
Anatomy
illustration slot — Brand art or an icon; empty by default (many old states were text-only).
title — type.title-4, centered. Says what is missing, plainly.
body — type.caption in text.secondary. One supporting line.
action slot — Defaults to a primary Button; clear it for text-only states; compose Links or Badge chips for the filter/account variants.
Guidelines
shouldOffer a way forward: the action names the next step (Create new list, See similar shows). — The old set's best states always did; the dead ends were the worst ones.
must-notNo blame in the copy — say what is here to do, not what the user failed to have. — Voice rule.
Design specifications
| layout | centered column, space.8 gap, action offset space.12 |
| title | type.title-4 |
| body | type.caption in color.text.secondary |
Accessibility
role=status so arrival is announced; heading level is h3 by default — adjust per page outline when the docs site lands.