Komponenten

Notifications

Über Notifications erhalten Nutzer wichtige Informationen und Status-Updates. Wie Sie diese anwenden, erfahren Sie in diesem Guide.

Notifications
  • Anwendung
  • Beispiele
  • Verwandte Komponenten
  • Download

Anwendung

Um die Hierarchie bei der Verwendung von Action Buttons zu verdeutlichen, benötigen Sie grundsätzlich einen Primary Button und einen Secondary Button. Für die Notifications können Sie unterschiedliche Farben verwenden, aber achten Sie auf das Kontrastverhältnis und die Textfarbe. Weitere Informationen zu Kontrast und Farben finden Sie in unseren Richtlinien zur Barrierefreiheit (Link unten).

Top-bar Notifications

Top-bar Notifications erstrecken sich über die gesamte Breite des Bildschirms und enthalten sowohl eine Textnachricht als auch ein Icon zum Schließen der Mitteilung. Top-bar Notifications können als fixiertes Element verwendet werden.

Toast notifications

Toast Notifications werden vom rechten oberen Rand her eingeblendet und liefern Nutzern Informationen in Textform. Bei Bedarf können sie mit einem Icon neben der Nachricht bzw. mit Action-Buttons kombiniert werden. Jede Toast Notification enthält ein Icon zum Schließen der Mitteilung.

Bottom-bar notifications

Bottom-bar Notifications können für Benachrichtigungen wie Informationen zum Datenschutz genutzt werden. Sie können interaktive Buttons enthalten. Bottom-bar Notifications sind fixierte Elemente.

Bottom-bar Notifications

Bottom-bar Notifications können für Benachrichtigungen wie Informationen zum Datenschutz genutzt werden. Sie können interaktive Buttons enthalten. Bottom-bar Notifications sind fixierte Elemente.

Notification badges

Notification Badges zeigen ungelesene Nachrichten oder den aktuellen Fortschritt beim Ausfüllen von Formularen an. Sie können als Informationselemente in seitlich bzw. oben angebrachten Navigationsleisten dienen oder den aktuellen Fortschritt beim Ausfüllen einzelner Textfelder anzeigen.

Beispiele

Verwandte Komponenten

Download

Wenn Sie ein Dokument herunterladen, akzeptieren Sie unsere Nutzungsbedingungen.

Sketch UI Library
ZIP
86,44 MB