# EmptyState

Was stattdessen eines leeren Listenzeigers angezeigt wird: es erklärt, warum leer ist, und lädt den nächsten Schritt ein.

## Playground

```html
<div class="feitio-empty"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 120 100" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
  <path d="M14 40c30-2.6 62 1.4 92-1.8"/>
  <path d="M18 41.5c3 16 6.2 32 10.4 46.6"/>
  <path d="M25.6 88.6c22.4-1.8 43.6.6 66.2-1.6"/>
  <path d="M101.6 41.6c-2.8 15.4-6 30.8-10.4 46.4"/>
  <path d="M32 52c1.8 10 3.2 20 4.6 29.4M50 52.6c.4 9.8.2 19.6.6 29.2M68.4 52c-.6 9.8-1.2 19.6-1.8 29.6M86 51.6c-1.6 9.6-3 19.4-4.8 29.2"/>
  <path d="M36 39c2.4-14 13-24.4 24.6-24.6C72.8 14.2 83.4 25 85 38.6"/>
  <path class="feitio-hot" d="M60.6 6.4c-.2 2.4.2 4.8-.1 7.2M44 11.2c1.4 1.8 2.6 3.6 4 5.6M77.2 11c-1.4 1.8-2.6 3.8-4 5.8"/>
</svg>
<h3>Noch keine Erinnerungen</h3><p>Erstelle die erste, dann erscheint sie hier.</p></div>
```

## Wann verwenden

-   Wenn eine Liste, Tabelle oder Seite nichts anzuzeigen hat: beim ersten Mal, nach einem Filter ohne Ergebnisse oder bei einem großen Fehler.

## Wann nicht verwenden

-   **Während des Ladens:** "empty" und "loading" sind verschiedene Dinge.
-   **Feldfehler:** die Fehlerkomponenten.

## Beispiele

### Erstmal

Mit dem Skizze und der Hauptaktion.

Code anzeigen

```html
<div class="feitio-empty">
  <svg …>…</svg>
  <h3>Nenhum agendamento ainda</h3>
  <p>Crie o primeiro e ele aparece aqui.</p>
  <button type="button" class="feitio-button" data-variant="primary">Criar agendamento</button>
</div>
```

### Suche ohne Ergebnisse

Keine Skizze, kompakt und der Weg zum Zurücksetzen des Filters.

Code anzeigen

```html
<div class="feitio-empty" data-size="compact">
  <h3>Nada encontrado para "plantas"</h3>
  …
</div>
```

### Große Fehlermeldung

Mit dem gerissenen Papier-Zeichnung und was zu tun ist.

Code anzeigen

```html
<div class="feitio-empty">
  <svg …>…</svg>
  <h3>O servidor não respondeu</h3>
  …
</div>
```

## Do and don't

Do

### Keine Aufgaben hier

Erstellen Sie die erste.

Sagt, was es ist und was zu tun ist.

Don’t

Das sieht so aus, als wäre hier noch nichts…

Kolonnenstriche und kein Ausweg: Die Person bleibt vor dem Nichts stehen.

## Schreiben

-   Titel: das, was nicht existiert ("Keine Termine noch"). Text: der nächste Schritt. Button: die Handlung, mit Verb und Objekt.

## Barrierefreiheit

-   Das Zeichen geht weiter (`aria-hidden`); die Überschrift und der Text sagen alles.

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-empty"`

erforderlich

Der zentrierte Kasten.

`data-size="compact"`

optional

Für eine Suche oder Filterung ohne Ergebnisse.

Die Zeichnungen sind im [Illustrations-Katalog](/de/resources/ilustracoes/).