EmptyState

Freundliche Darstellung leerer Zustände mit klarem nächsten Schritt. Keine "Nichts gefunden"-Sackgasse — sondern eine Einladung. Für Förderlisten, Lade-Apps und Backoffice.

Erststart — keine Daten vorhanden

Der häufigste Fall: Nutzer:in ist neu, Liste ist leer. Mit klarer CTA.

Förderanträge — leer

Mit Icon, Beschreibung und primärer Aktion.

Noch keine Förderanträge

Stellen Sie Ihren ersten Antrag für Solar, Wärmepumpe oder ePKW. Wir führen Sie Schritt für Schritt durch.

<EmptyState
  title="Noch keine Förderanträge"
  description="Stellen Sie Ihren ersten Antrag für Solar, Wärmepumpe oder ePKW. Wir führen Sie Schritt für Schritt durch."
  tone="info"
>
  <svg slot="icon" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
    <polyline points="14 2 14 8 20 8" />
  </svg>
  <Button slot="actions" variant="primary">Antrag stellen</Button>
  <Button slot="actions" variant="ghost">Fördercheck starten</Button>
</EmptyState>

Such-Ergebnis leer

Neutraler Ton, Hinweise zur Eingrenzung, optional ein "Filter zurücksetzen".

Keine Ladesäulen in der Nähe

Im aktuellen Kartenausschnitt sind keine verfügbaren Säulen. Erweitern Sie den Suchradius oder wechseln Sie den Filter.

<EmptyState
  title="Keine Ladesäulen in der Nähe"
  description="Im aktuellen Kartenausschnitt sind keine verfügbaren Säulen. Erweitern Sie den Suchradius oder wechseln Sie den Filter."
>
  <Button slot="actions" variant="primary">Suchradius erweitern</Button>
  <Button slot="actions" variant="ghost">Karte zentrieren</Button>
</EmptyState>

Erfolgsmeldung als EmptyState

Tone "success" — wenn etwas Positives gemeldet werden soll, das einen leeren Zustand erzeugt.

Alle Anträge bearbeitet

Ihr Eingangskorb ist leer. Neue Anträge erscheinen hier automatisch.

<EmptyState
  title="Alle Anträge bearbeitet"
  description="Ihr Eingangskorb ist leer. Neue Anträge erscheinen hier automatisch."
  tone="success"
/>

Minimal — ohne Icon und Aktion

Reduzierte Variante, wenn die umgebende Seite bereits Kontext liefert.

Tabelle ohne Treffer

Ihre Suche ergab keine Treffer

Prüfen Sie Schreibweise und Filter.

<EmptyState title="Ihre Suche ergab keine Treffer" description="Prüfen Sie Schreibweise und Filter." />

Redakteurshinweise

Wann einsetzen

Erststart einer Liste/App ohne Daten
Such-/Filter-Ergebnis leer
Eingangskorb / Aufgaben-Liste vollständig erledigt
Tabellen-Zustand "kein Treffer" — kompakte Variante ohne Icon

Inhalts-Empfehlungen

Titel: 2–6 Worte, was genau leer ist
Description: was die Person als Nächstes tun kann
Eine, hoechstens zwei Aktionen — primär + ghost
Ton "info" für Onboarding, "success" für "alles erledigt"

Mobile & A11y

role="status" + aria-live="polite" — Änderung wird angekündigt
Icon ist aria-hidden — Information trägt der Text
Mobile: Aktionen wickeln in mehrzeilig, kein Overflow
Kontrast pro Tone ist Token-gepflegt

Pitfalls

Niemals als Fehlermeldung nutzen — dafür ist Alert da
Nicht mehr als zwei Aktionen — sonst entscheiden die Nutzer:innen nicht
Kein Tonfall "Hoppla!" oder "Oh nein!" — sachlich bleiben
Kein Bild ohne Sinn — Icon im Slot ist optional

Installation

cp-components add emptystate