Components

Jede Component mit ihren Varianten und Zuständen – die Beispiele sind echt und bedienbar.

• Button

  Ein Button löst eine Aktion aus, zum Beispiel etwas speichern, absenden oder einen Dialog öffnen, und über die Gewichtung (emphasis) zeigt er, wie wichtig die Aktion im Verhältnis zu anderen auf der Seite ist.. Sein Label sagt klar, was beim Klick passiert.

• Form Field

  Ein Form Field lässt Nutzer freien Text eingeben, zum Beispiel einen Namen, oder eine E-Mail-Adresse. Ein Label beschreibt, was eingegeben werden soll, und Hinweise oder Fehlermeldungen helfen dabei, die Eingabe korrekt auszufüllen.

• Select

  Auswahl aus bis zu ca. 15 Optionen, ohne Texteingabe

• Combobox

  Auswahl aus mehr als ca. 15 Optionen, mit Filter durch Tippen

• List Box Item

  Option in der Listbox von Select und Combobox – Zustände und Inhalte

• Checkbox & Radio

  Selektion links, Label rechts

• Toggle

  Switch-Control · Track links, Label rechts

• Segmented Control

  Gruppe aus verbundenen Segmenten · eines aktiv

• Avatar

  Initialen · Bild · Icon — drei Größen, immer rund

• List Item

  Icon/Avatar · Text · Meta · Action — Baustein für Listen und Menüs

• Mehrfachauswahl

  Muster: Multi-Select-Modus — Checkbox + accent1-State, kein blauer Balken

• Accordion

  Header (Titel + Chevron) + ausklappbarer Inhalt

• Display Field

  Label + Wert — read-only, optional mit Flag oder Status Chip

• Flag & Status

  Non-interaktive Labels — Kategorie-Tag (Flag) und Zustandsanzeige (Status Chip)

• Filter Chip

  Interaktiver Toggle-Chip für Filter-Bars — vollrund, Checkmark bei Auswahl

• Card

  Surface + Titel + Body + optional Actions + Image

• Carousel

  Wischen, Ziehen mit der Maus oder Pfeiltasten · rastet pro Slide ein · Punkte zeigen Anzahl und aktives Slide · aktiv = Selection (Sky)

• Banner

  Schwebender Hinweis unten · Einwilligung: beide Aktionen gleichwertig

• Section-Divider

  Silhouette in der Farbe der Folge-Section · Form per --divider-shape (Brand)

• Alert

  danger · warning · success — mit und ohne Titel

• Header Navigation

  Logo links · Tab-Nav rechts · Mobile: Logo oben, Nav darunter

• Sidebar Navigation

  Icon + Label · Hover öffnet Drawer · Level 3 per Akkordeon · Mobile: Burger-Menu