Design systemEmpty states
Say what is missing and offer one way forward.
<div className="page-empty">
<span className="page-empty__icon"><FileText size={22} /></span>
<p className="page-empty__title">No pages yet</p>
<p className="page-empty__text">Pages you build from Home appear here. Each one is made from your published components.</p>
<Button variant="primary" label="Build a page" icon={Plus} />
</div>Anatomy
| Part | Spec |
|---|---|
| Icon tile | 48px square, --radius-lg, grey-50 fill and grey-100 border, a 22px icon in grey-400 |
| Title | 16px medium, what is missing |
| Text | 14px secondary text, at most two sentences, at most 380px wide |
| Action | One button, when there is something to do |
Kinds of empty
| Situation | Title | Action |
|---|---|---|
| Nothing created yet | "No pages yet" | Create the first one |
| A filter or search found nothing | "No pages match these filters" | Clear filters |
| Nothing to do | "You are up to date" | None |
| Something failed to load | "Could not load pages" | Try again |
Do not use illustrations or jokes. The icon is the same one the section uses in navigation.