Empty State

Empty States werden innerhalb einer Komponente genutzt, wenn diese keine Daten aufweisen können.

  • Schrack Seconet
  • Neutral
  • verwendung

Beispiel

Der Empty State kann dem User drei verschiedene Zustände vermitteln (wobei der Text frei auswählbar ist):

  • Neutral
  • Positiv
  • in Umsetzung/in Wartestellung

Example Empty State Functional Design


Die genannten Zustände können in zwei verschiedenen Varianten dargestellt werden:

  • als Kreis für mobile Applikationen
  • als Rechteck für Desktop-Applikationen
Cookies akzeptieren

Live Demo

Der Empty State besteht aus:

  • einem Icon, das zum Kontext passt;
  • einem Titel, der kurz und knapp die Problemstellung bzw. Situation beschreibt;
  • einer Beschreibung (optional), die weitere essentielle Informationen mitgibt, wie z. B. was der User unternehmen kann, um einen Empty State zu vermeiden bzw. weitere Call-to-Actions.

Showcases

Cookies akzeptieren
Über das Design SystemWas gibt es Neues?Für DeveloperFür DesignerComponentsFoundationsIcon LibraryFeedbackFAQKontaktImpressumDatenschutz