Empty state

Nothing here yet

<div class="dsgn-card"><div class="dsgn-empty"><span class="dsgn-icon" aria-hidden="true">receipt_long</span><h3 class="dsgn-empty-title">No invoices yet</h3>
  <p class="dsgn-empty-text">Invoices you create or import will appear here.</p>
  <div class="dsgn-empty-actions"><button class="dsgn-button"><span class="dsgn-icon" aria-hidden="true">add</span>New invoice</button><button class="dsgn-button" data-variant="ghost" data-intent="neutral"><span class="dsgn-icon" aria-hidden="true">upload</span>Import CSV</button></div></div></div>

Usage

Fills an empty list, table or page and says what to do next. Centred, max 48ch of text. Icon = display line-height, text-muted, filled; padding = 2 × inset (Density). One primary action at most. For "no results" after a search, offer to clear the filter.

Details

Classes

.dsgn-empty .dsgn-icon .dsgn-empty-title .dsgn-empty-text .dsgn-empty-actions

Tokens used

--dsgn-control-gap --dsgn-font-sans --dsgn-font-size-body-s --dsgn-font-size-title --dsgn-font-weight-semibold --dsgn-inset --dsgn-line-height-body-s --dsgn-line-height-display --dsgn-line-height-title --dsgn-space-4 --dsgn-space-8 --dsgn-text --dsgn-text-muted

In Figma

Empty state

Import alone

dsgn.systems/components/empty.css