Empty state

A centered layout for “no data yet” or “get started” screens. Supports an icon, title, description, and optional action buttons.

Basic empty state

No failed payments yet

When Stripe reports a failed charge we'll queue retries and show them here.

<div class="nano-empty">
  <div class="nano-empty__icon"><svg ...></svg></div>
  <h3 class="nano-empty__title">No failed payments yet</h3>
  <p class="nano-empty__description">When Stripe reports a failed charge we'll queue retries and show them here.</p>
  <div class="nano-empty__actions">
    <button class="nano-btn nano-btn--primary">Connect Stripe</button>
  </div>
</div>

Bordered (dashed outline)

Nothing here

Add your first item to get started.

<div class="nano-empty nano-empty--bordered">
  <h3 class="nano-empty__title">Nothing here</h3>
  <p class="nano-empty__description">Add your first item to get started.</p>
</div>

Variants

.nano-empty--bordered — dashed outline for empty panels/tables
.nano-empty--compact — tighter padding for smaller zones

Elements

.nano-empty__icon — optional icon, muted circular background
.nano-empty__title — primary heading
.nano-empty__description — supporting text (muted)
.nano-empty__actions — optional button row