- ds
- Components
- Empty state
Empty state
What to show when there is nothing yet.
Empty canvas
Draw a system, or paste one
Pick a tool above, press Ctrl+K to describe it to a model, or paste topo text from any chat.
Code
<div class="empty">
<p class="label kicker">Empty canvas</p>
<h2>Draw a system, or paste one</h2>
<p>Pick a tool above, press Ctrl+K to describe it to a model, or paste topo text from any chat.</p>
<div class="btn-row">
<button class="btn accent">Draw with AI</button>
<button class="btn">Open an example</button>
</div>
</div>Say what this place is for, then give the one or two ways to start. No illustrations; the dot grid is enough.
| Class | On | What it does |
|---|---|---|
.empty | div | Centred kicker, heading, text and actions. |