---
category: Surfaces
---

The reference has no empty state, because every surface on it is a canned demo — so
this is derived from the parts it does have, and it is stated here so it is not
invented twice.

A `--paper` well at `--r-well`, a centred 18px/600 title in `--ink`, a 16px/400
explanation in `--ink-body`, one `--coral` button. **No illustration.** The only thing
above the text is an empty bubble at `--r-bubble` drawn hollow in `--line-quiet` with
no shadow — the page's own object with nothing in it, which is exactly what an empty
state means here.

```tsx
<Empty title="No threads yet" body="We are watching four platforms."
       action={<Button>Add a keyword</Button>} />
```