Feedback

Tell people when work is in progress or content is missing. Explain errors and give a useful next action.

Spinner

Set the spinner's size with size-* and its color with a text color class. Use --spinner-width to adjust the stroke. Add a visible label or label its button. The spinner slows down for reduced motion.

HTML

<span class="spinner size-4 text-rambutan-400" aria-hidden="true"></span>
<span class="spinner size-6 text-persimmon-400 [--spinner-width:3px]" aria-hidden="true"></span>
<button type="button" class="btn btn-primary pl-2" disabled>
  <span class="spinner size-4" aria-hidden="true"></span> Scanning…
</button>

Empty state

Use empty-state to center a message and one action. Say what's missing and what to do next. Add min-h-dvh for a full page.

No scans yet

Pick a folder to see what's using space

Choose a folder to start your first scan.

HTML

<div class="empty-state">
  <p class="text-eyebrow text-rambutan-500">No scans yet</p>
  <h2 class="text-h3">Pick a folder to see what's using space</h2>
  <p class="text-body-sm">Choose a folder to start your first scan.</p>
  <button type="button" class="btn btn-primary mt-4">Choose folder</button>
</div>

Rules

Show a spinner after a short wait. Skip it when the work finishes immediately.

Say what failed and how to fix it.

Give each empty state one action. If no action is available, explain when the content will appear.