Overlay-Komponenten
Alles, was über der Seite schwebt: Dialoge und Bestätigungen, Seitenpanels und wischbare Drawer, Popover, Hover-Cards, Tooltips, Dropdown- und Kontextmenüs, eine Menüleiste und eine ⌘K-Befehlspalette.
Der Fokus springt beim Öffnen hinein und beim Schließen zurück, sie bleiben bis 320 Pixel Breite auf dem Bildschirm, und Dialoge werden auf Handys zu wischbaren Bottom Sheets.
- Alert dialogEin Bestätigungsdialog für destruktive oder wichtige Aktionen, der auf asynchrone Arbeit wartet und auf Smartphones zum Bottom Sheet wird.
- CommandEine durchsuchbare Liste von Aktionen, inline oder als ⌘K-Palette, mit Seiten, Tastenkürzeln und hervorgehobenen Treffern.
- Context menuEin Menü mit Aktionen per Rechtsklick oder langem Drücken, mit Untermenüs, Checkbox- und Radio-Einträgen sowie Halte-Feedback auf Touch-Geräten.
- DialogEin Fenster über der Seite für Formulare und fokussierte Aufgaben, mit fixiertem Header und Footer, Verschachtelung und einem wischbaren Bottom Sheet auf Smartphones.
- DrawerEin Panel, das von jeder Kante hereingleitet und deinem Finger folgt, mit Snap-Punkten, einem funktionierenden Griff und verschachtelten Drawern, die sich stapeln.
- Dropdown menuEin Menü mit Aktionen und Optionen hinter einem Button, mit Gruppen, Untermenüs, Checkbox- und Radio-Einträgen sowie Tastenkürzeln.
- Hover cardEine Vorschaukarte, die sich öffnet, wenn ein Link mit der Maus berührt oder fokussiert wird, für Inhalte, die sehende Nutzer kurz überfliegen können.
- MenubarEine Menüleiste im Desktop-Stil mit einem Highlight, das zwischen offenen Menüs gleitet, und sofortigem Wechsel, wenn du darüberfährst.
- PopoverEin schwebendes Panel, das an einem Trigger verankert ist, sich sanft mit seinem Inhalt in der Größe ändert und der Richtung des Triggers folgt.
- SheetEin Panel, das von jeder Kante hereingleitet, mit Wischen zum Schließen, Scroll-Sperre und gestapelter Verschachtelung.
- TooltipEin kurzer Hinweis bei Hover oder Tastaturfokus, der sich nach kurzer Ruhezeit öffnet, zwischen benachbarten Elementen sofort wechselt und Tastenkürzel anzeigt.
In Pro-Blöcken verbaut
Blöcke für KI-Produkte, die aus diesen Komponenten gebaut sind.
- API keysDie API-Schlüssel-Seite eines KI-Produkts. Deckt ein nur einmal gezeigtes Secret, Widerrufen mit Rückgängig und Rotation mit Übergangsfrist ab.
- BillingDie Plan- und Nutzungsseite eines KI-Produkts. Deckt Guthaben, das mitten im Zyklus ausgeht, Planwechsel mit anteiliger Abrechnung und Kartenfehler ab.
- NotificationsDer Bereich Benachrichtigungen in den Einstellungen eines KI-Produkts. Deckt ein Raster Kanal mal Ereignis, Ruhezeiten und die Browser-Berechtigung für Push ab.
- SecurityDer Bereich Sicherheit in den Einstellungen eines KI-Produkts. Deckt Sitzungen, Zwei-Faktor mit Wiederherstellungscodes und Löschung hinter einer getippten Bestätigung ab.
- SettingsDie Einstellungsseite eines KI-Produkts. Deckt eine Speicherleiste, die nur bei Änderungen erscheint, Feldfehler und Ladezustände ab.
- TeamDie Teamseite in den Workspace-Einstellungen eines KI-Produkts. Deckt ausgehende Plätze, offene Einladungen und Eigentumsübertragung mit getippter Bestätigung ab.