Modals, Toasts, Tooltips und Menüs

Dialogs, Sheets, Popovers, Tooltips und Toasts.

9 Components · 21 Variants

Kategorie wechseln

Neun Overlays und wann welches passt

Overlays legen etwas über die Seite, und jede Art verlangt ein anderes Maß an Aufmerksamkeit. Die neun Components hier regeln Fokus, Escape und Klicks daneben selbst und geben den Fokus beim Schließen an den Auslöser zurück, genau das, was handgeschriebene Modals oft vergessen.

Dialog hält alles an für eine Entscheidung oder ein kurzes Formular. Sheet gleitet von einer Kante herein, für Filter oder Details. Popover und Hover-Karte zeigen mehr neben einem Auslöser, ohne die Seite zu sperren. Tooltip beschriftet Icons. Das Aufklappmenü trägt Aktionen mit Tastenkürzeln und ein Kontextmenü. Die Befehlspalette sucht und startet alles mit Strg K. Die Meldung bleibt in der Seite, der Hinweis meldet das Ergebnis einer Aktion und geht von selbst.

Wähle das leichteste Overlay, das die Aufgabe erfüllt, für eine Erfolgsmeldung einen Toast statt eines Dialogs. Wichtiges gehört nie nur in einen Tooltip, auf Touchscreens gibt es kein Hover. Halte Dialoge kurz, ein Formular mit mehr als fünf Feldern bekommt eine eigene Seite.

Auf dieser Seite

Alle Components dieser Kategorie. Wähle eine, um zu ihren Variants zu springen.

Hover-Karte4
Aufklappmenü3
Meldung2
Befehlspalette2
Dialog2
Popover2
Sheet2
Hinweis2
Tooltip2

hover-card

Mehr über eine Person, einen Link, ein Produkt oder einen Begriff, während man darauf verweilt. Öffnet bei Hover und Fokus, Tab erreicht ihre Knöpfe, auf Touch öffnet der erste Tipp.

Profil
Linkvorschau
Produkt
Begriff

Props und Details

Profil

Eine Erwähnung, die zeigt, wer jemand ist, mit Avatar, Rolle, kurzer Vorstellung, zwei Zahlen und einem Knopf zum Folgen.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/hover-card

Bringt mit utils, kit, icon, avatar

Usage

<HoverCard variant="profile" label="@mara" title="Mara Lindqvist" subtitle="Design lead" stats={[{ label: "releases", value: "42" }]} action="Follow" />

Source

Linkvorschau

Ein Link im Text, der vor dem Verlassen der Seite zeigt, wohin er führt, mit Bild, Adresse, Titel und kurzer Zusammenfassung.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/hover-card

Bringt mit utils, kit, icon, avatar

Usage

<HoverCard variant="link" label="our field guide" href="/guide" title="A field guide to clay" subtitle="studio-lehm.example/guide" media={<img … />} />

Source

Produkt

Ein Produkt, das in einer Geschichte vorkommt, mit Bild, Bewertung, Preis und einem Knopf, der es in den Warenkorb legt, ohne die Seite zu verlassen.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/hover-card

Bringt mit utils, kit, icon, avatar

Usage

<HoverCard variant="product" label="Tide mug" title="Tide mug" price="$28.00" rating={4.8} media={<ProductImage … />} action="Add to bag" />

Source

Begriff

Ein Begriff mit gepunkteter Linie, der sich selbst erklärt, für Glossare, Rechtstexte und Kurse. Ohne Knopf ist die Karte nur Text.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/hover-card

Bringt mit utils, kit, icon, avatar

Usage

<HoverCard variant="definition" label="bisque firing" title="Bisque firing" subtitle="Glossary" description="The first firing …" />

Source

dropdown-menu

Menüs mit Icons, Kürzeln, Häkchen und Optionen. Pfeiltasten, Pos1, Ende, Tippen, Escape. Dazu ein Kontextmenü.

Props und Details

Aktionen

Icons, Kürzel, ein Trenner und die zerstörerische Aktion am Ende.

Installv1.0.1

aiw add @ai-website/dropdown-menu

Bringt mit utils, kit, icon, popover

Usage

<DropdownMenu trigger={<Button>Actions</Button>} items={[{ label: "Edit", icon: "edit", shortcut: "⌘E" }, { type: "separator" }, …]} />

Source

Konto

Ein Kopf mit der angemeldeten Person, gruppierte Links und Abmelden.

Kontextmenü

Dasselbe Menü am Zeiger bei Rechtsklick, oder per Tastatur.

alert

Meldung

Meldungen in der Seite für Info, Erfolg, Warnung und Fehler, jeweils mit Icon und klaren Worten. Die Töne kommen aus den Kit-Tokens.

Töne
Stile

Props und Details

Töne

Weiche Flächen mit Titel, Text und Aktionen. Sie steigen nacheinander auf, eine ausgeblendete Meldung gleitet hinaus und der Platz schließt sich weich.

Installv1.0.0

aiw add @ai-website/alert

Bringt mit utils, kit, icon, toast

Usage

<Alert tone="warning" title="…" actions={…} dismissible>…</Alert>

Source

Stile

Umrandet für Karten, ein Balken an der Kante für lange Seiten, eine kompakte Zeile für Formulare und Leisten.

Installv1.0.0

aiw add @ai-website/alert

Bringt mit utils, kit, icon, toast

Usage

<Alert variant="outline|accent|inline" tone="…" />

Source

command-palette

Befehlspalette

Alles suchen und ausführen. Strg K oder ⌘K öffnet, Pfeile bewegen, Enter führt aus, und Gruppen halten Ordnung.

Befehlsliste
Palette

Props und Details

Befehlsliste

Der Inhalt der Palette an Ort und Stelle. Einfach tippen, die Liste filtert über Namen, Hinweise und Stichwörter.

Installv1.0.1

aiw add @ai-website/command-palette

Bringt mit utils, kit, icon, dialog

Usage

<Command items={[{ id, label, group, icon, keys }]} />

Source

Palette

Im Modal nahe dem oberen Rand. Strg K oder ⌘K drücken, oder den Knopf nutzen.

Installv1.0.1

aiw add @ai-website/command-palette

Bringt mit utils, kit, icon, dialog

Usage

<CommandPalette items={…} />

Source

dialog

Dialog

Ein Modal auf dem nativen Dialog-Element. Der Fokus bleibt drin, Escape und der Hintergrund schließen, und der Fokus kehrt zum Auslöser zurück.

Mit Formular
Bestätigung

Props und Details

Mit Formular

Titel, Text, Felder und Aktionen. Auf dem Telefon sitzt der Dialog unten, nah am Daumen.

Installv1.0.0

aiw add @ai-website/dialog

Bringt mit utils, kit, icon

Usage

<Dialog trigger={<Button>Invite</Button>} title="…" description="…" footer={(close) => …}>…</Dialog>

Source

Bestätigung

Ein Alert-Dialog für Schritte, die etwas löschen. Er nennt die Sache und die Folge und wartet auf eine Antwort.

Installv1.0.0

aiw add @ai-website/dialog

Bringt mit utils, kit, icon

Usage

<Dialog role="alertdialog" icon="trash" tone="destructive" title="Delete …?" footer={…} />

Source

popover

Ein Panel neben dem Auslöser für kurze Formulare und Details. Klappt um, wenn kein Platz ist, Escape und ein Klick daneben schließen.

Teilen
Details

Props und Details

Ein kleines Formular im Panel. Der Fokus geht beim Öffnen hinein und beim Schließen zurück zum Knopf.

Details

Informationen auf Abruf, hier die Öffnungszeiten eines Cafés neben der Adresse.

sheet

Sheet

Ein modales Panel, das von jeder Kante hereingleitet, mit festem Kopf, scrollendem Inhalt und haftender Fußzeile.

Filter von rechts
Links und unten

Props und Details

Filter von rechts

Der Klassiker für Filter, Warenkorb und Details. Die Fußzeile bleibt, während der Inhalt scrollt.

Installv1.0.0

aiw add @ai-website/sheet

Bringt mit utils, kit, icon, dialog

Usage

<Sheet side="right" trigger={<Button>Filters</Button>} title="Filters" footer={…}>…</Sheet>

Source

Links und unten

Navigation von links, kurze Hinweise von unten mit Griff.

Installv1.0.0

aiw add @ai-website/sheet

Bringt mit utils, kit, icon, dialog

Usage

<Sheet side="left" title="Menu">…</Sheet>  <Sheet side="bottom" title="…" />

Source

toast

Hinweis

Kurze Meldungen nach einer Aktion, gestapelt und beim Hovern aufgefächert. Zeiten pausieren beim Lesen, Fehler bleiben länger.

Varianten
Live-Stapel

Props und Details

Varianten

Erfolg, Fehler, Warnung, Info, Laden und eine Aktion. Immer Icon und Worte, nie nur Farbe.

Installv1.0.0

aiw add @ai-website/toast

Bringt mit utils, kit, icon, loading-button, popover

Usage

toast.success("Changes saved", { description: "…", action: { label: "Undo", onClick } })

Source

Live-Stapel

Ein paar Hinweise auslösen. Sie stapeln sich unten rechts, fächern beim Hovern auf und schließen von selbst.

Installv1.0.0

aiw add @ai-website/toast

Bringt mit utils, kit, icon, loading-button, popover

Usage

<Toaster position="bottom-right" />  toast.promise(save(), { loading, success, error })

Source

tooltip

Kurze Beschriftungen bei Hover und Fokus, optional mit Tastenkürzel. Escape blendet aus, wichtige Inhalte gehören nie hinein.

Seiten und Kürzel
In einer Leiste

Props und Details

Seiten und Kürzel

Vier Seiten, der Pfeil zeigt immer auf den Auslöser, auch wenn der Tipp ausweichen muss.

In einer Leiste

Icon-Knöpfe bekommen ihren Namen beim Hovern. Der ruhige Ton passt zu Hilfe neben Formularfeldern.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Overlays stehen.

Neun Overlays und wann welches passt

Auf dieser Seite

Profil

Linkvorschau

Produkt

Begriff

Aktionen

Konto

Kontextmenü

Töne

Stile

Befehlsliste

Palette

Mit Formular

Bestätigung

Teilen

Details

Filter von rechts

Links und unten

Varianten

Live-Stapel

Seiten und Kürzel

In einer Leiste

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit