Notify

Every caseAlle Fälle

		ExampleBeispiel
Info	TextText	Text
	CloseSchließen	Text
	DetailsDetails	Text
	LinkLink	Text Link
Warning	LinkLink	Text Link
	ButtonButton	Text
	DetailsDetails	Text

Toast

Every caseAlle Fälle

		ExampleBeispiel
Toast	SuccessErfolg	Filter saved
	Success · UndoSuccess · Undo	Chart deleted
	WarningWarnung	Saving failed
	InfoInfo	Map saved. Assigning it needs the service role.
Live	Try itAusprobieren

Progress bar

UseVerwendung: Work that takes longer than 2 s and whose progress is known: exports, imports, updates; an unknown duration shows the SpinnerArbeit, die länger als 2 s dauert und deren Fortschritt bekannt ist: Exporte, Importe, Updates; eine unbekannte Dauer zeigt den Spinner
TrackSpur: 8 px high, full width up to 400 px, fully rounded, secondary-2008 px hoch, volle Breite bis 400 px, voll gerundet, secondary-200
FillFüllung: App fill color while running, success-fill when done, error when it failed; it moves smoothly, never backwardsApp-Füllfarbe während es läuft, success-fill wenn fertig, error wenn es fehlgeschlagen ist; bewegt sich weich, nie rückwärts
LabelBeschriftung: What is happening, 14 px Light above the bar; the percent 12 px text-muted with tabular figures at the right endWas gerade passiert, 14 px Light über der Leiste; der Prozentwert 12 px text-muted mit tabellarischen Ziffern am rechten Ende
DetailDetail: 12 px text-muted line below (1,240 of 3,100 rows); it is replaced by the result when the work ends12-px-text-muted-Zeile darunter (1,240 of 3,100 rows); sie wird durch das Ergebnis ersetzt, wenn die Arbeit endet
DoneErledigt: Success icon and the result (“Export ready”), then the next step as a button, e.g. “Download [file]”; the percent disappearsErfolgs-Icon und das Ergebnis („Export ready“), dann der nächste Schritt als Button, z. B. „Download [file]“; der Prozentwert verschwindet
FailedFehlgeschlagen: Error icon and the message in danger-text; the bar stops where it failed; “Try again” as a secondary buttonFehler-Icon und die Meldung in danger-text; die Leiste bleibt dort stehen, wo es fehlgeschlagen ist; „Try again“ als Secondary-Button
SmallKlein: 4 px bar, 96 px wide, percent beside it; for table cells and list rows, without a label: the row says what is running4-px-Leiste, 96 px breit, Prozentwert daneben; für Tabellenzellen und Listenzeilen, ohne Label: die Zeile sagt, was läuft
Screen readersScreenreader: progressbar with its label, minimum, maximum and value; the result line is announcedprogressbar mit Label, Minimum, Maximum und Wert; die Ergebniszeile wird angesagt

Every stateAlle Zustände

		ExampleBeispiel
Bar	RunningLäuft	Exporting orders-week-45.csv40 % 1,240 of 3,100 rows
	StartingStartet	Importing vehicles.csv0 % Starting…
	DoneErledigt	orders-week-45.csv100 % Export ready
	FailedFehlgeschlagen	orders-week-45.pdf60 % Couldn’t export the PDF. Try again.
Small	RunningLäuft	72 %
Small	DoneErledigt	100 %

Try it — the CSV export finishes, the PDF export fails onceAusprobieren – der CSV-Export wird fertig, der PDF-Export schlägt einmal fehl

Page banner

UseVerwendung: One message about the whole app: planned maintenance, an expiring subscription, offlineEine Meldung über die ganze App: geplante Wartung, ein auslaufendes Abo, offline
PositionPosition: At the very top of the app page, above the page header, across the full width; it pushes the page down and never covers itGanz oben auf der App-Seite, über dem Seitenkopf, über die volle Breite; schiebt die Seite nach unten und verdeckt sie nie
HeightHöhe: 40 px for one line: 4 px above and below 32 px controls; longer text wraps40 px für eine Zeile: 4 px über und unter 32-px-Controls; längerer Text bricht um
PaddingInnenabstand: 16 px left like the page; 16 px right, 8 px when it ends with the ×16 px links wie die Seite; 16 px rechts, 8 px wenn sie mit dem × endet
LookAussehen: The Notify colors without radius and frame: status surface with a 1 px line at the bottom; icon 20 px, 8 px to the text, 14 px Light textDie Notify-Farben ohne Radius und Rahmen: Status-Fläche mit einer 1-px-Linie unten; Icon 20 px, 8 px zum Text, 14 px Light Text
TonesTöne: Info and warning only (warning in the problem tones); an error is shown where it happens, never as a bannerNur Info und Warnung (Warnung in den Problem-Tönen); ein Fehler wird dort gezeigt, wo er passiert, nie als Banner
ActionAktion: Optional, the blue secondary button at the end of the rowOptional, der blaue Secondary-Button am Ende der Zeile
CloseSchließen: Info only: dark inset ×, 24 px; a closed banner stays closed for this viewer until the message changes. A warning is never closable and goes away once it is resolvedNur Info: dunkles Inset-×, 24 px; ein geschlossenes Banner bleibt für diese Person geschlossen, bis sich die Meldung ändert. Eine Warnung ist nie schließbar und verschwindet, sobald sie gelöst ist
How manyWie viele: One at a time; a warning wins over infoImmer nur eines; eine Warnung geht vor Info
Versus NotifyGegenüber Notify: Notify sits inside the content it is about (a form, a panel, a box), with a frame and radius 12 px; the page banner is about the whole app and spans the pageNotify sitzt im Inhalt, um den es geht (ein Formular, ein Panel, eine Box), mit Rahmen und 12 px Radius; das Page banner betrifft die ganze App und spannt sich über die Seite
Screen readersScreenreader: status role: read once when it appearsstatus-Rolle: wird einmal vorgelesen, wenn es erscheint

Every caseAlle Fälle

		ExampleBeispiel
Info	TextText	Planned maintenance on Sunday, 2026-11-15, 02:00–04:00. Analytics is read-only during this time.
	CloseSchließen	Planned maintenance on Sunday, 2026-11-15, 02:00–04:00. Analytics is read-only during this time.
	Close · hoverSchließen · Hover	Planned maintenance on Sunday, 2026-11-15, 02:00–04:00. Analytics is read-only during this time.
	Button · closeButton · Schließen	Boards can now be shared with other unions.
Warning	ButtonButton	Your Analytics subscription ends on 2026-11-30.
	Button · hoverButton · Hover	Your Analytics subscription ends on 2026-11-30.
	TextText	You are offline. Changes are saved as soon as the connection is back.

Try it — close the banner, bring it backAusprobieren – das Banner schließen und zurückholen

Planned maintenance on Sunday, 2026-11-15, 02:00–04:00. Analytics is read-only during this time.

Boards

Tooltip

Every caseAlle Fälle

	ExampleBeispiel
ShortKurz
Long textLanger Text
Try itAusprobieren

Feedback

Notify

Toast

Progress bar

Page banner

Boards

Tooltip