Components / Feedback & Status / Empty state

Empty state beta

What a screen says when there is nothing in it yet: one icon, one line, one way forward.

Preview

No exports yet

Exports you create will appear here, ready to download or share.

Uses: Button — include its CSS alongside this one.

<div class="k-empty" style="max-width:440px">
  <span class="k-empty-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v10m0 0 4-4m-4 4-4-4"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg></span>
  <h3>No exports yet</h3>
  <p>Exports you create will appear here, ready to download or share.</p>
  <span class="k-empty-act"><button class="btn btn-pri btn-md" type="button">Create export</button></span>
</div>

/* KATA Empty state */
.k-empty{display:grid;justify-items:center;text-align:center;gap:7px;padding:36px 22px;border:1.5px dashed var(--k-border-strong);border-radius:var(--k-radius-lg);background:var(--k-bg)}
.k-empty .k-empty-ic{width:46px;height:46px;border-radius:50%;background:var(--k-bg-soft);display:grid;place-content:center;color:var(--k-ink-3);margin-bottom:3px}
.k-empty h3{font-size:14px;font-weight:600;color:var(--k-ink);font-family:var(--k-font)}
.k-empty p{font-size:13px;line-height:1.7;color:var(--k-ink-2);max-width:36ch;font-family:var(--k-font)}
.k-empty .k-empty-act{margin-top:9px}

Usage

For first-run and no-results states. Name what is missing, then give the single action that fixes it. Never a dead end, never a joke at the user's expense.

Accessibility

The heading inside is a real heading at the right level for the page. The action is a real button or link.

Badge

Meter