Dialoge & Feedback

Alle Overlays fangen den Fokus ein und sind mit Escape schließbar.

Dialog

shadcn/ui · dialog

Import

import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"

Verwendung

Für kurze, fokussierte Aufgaben.
Escape schließt, Fokus kehrt zum Auslöser zurück (Radix).
Primäraktion rechts.

Alert Dialog

shadcn/ui · alert-dialog

Import

import { AlertDialog, AlertDialogAction } from "@/components/ui/alert-dialog"

Verwendung

Pflicht vor destruktiven Aktionen.
Fokus startet auf Abbrechen.
Klick außerhalb schließt nicht.

Sheet / Drawer

shadcn/ui · sheet + drawer (vaul)

Auslöser

Import

import { Sheet } from "@/components/ui/sheet" · import { Drawer } from "@/components/ui/drawer"

Verwendung

Sheet: Detailbearbeitung am Desktop (rechts).
Drawer: mobile Aktionen von unten.
Escape schließt, Fokus kehrt zum Auslöser zurück (Radix).

Dropdown Menu / Context Menu

shadcn/ui · dropdown-menu + context-menu

Beispiele

Rechtsklick hier

Import

import { DropdownMenu } … import { ContextMenu } …

Verwendung

Pfeiltasten navigieren, Enter wählt, Escape schließt.
Destruktive Einträge zuletzt und getrennt.

Alert

shadcn/ui · alert

Hinweis

Die Nebenkostenabrechnung 2025 ist vorbereitet.

Erfolgreich

Alle Mieten für Oktober sind eingegangen.

Achtung

3 Zählerstände fehlen noch.

Fehler

Lastschrift konnte nicht eingezogen werden (Demo).

Import

import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert"

Verwendung

Inline-Hinweis im Seitenkontext.
Ton über Status-Tokens, immer mit Icon.

Toast (Sonner)

shadcn/ui · sonner

Typen

Import

import { toast } from "sonner"

Verwendung

Kurze Rückmeldung nach Aktionen.
Fehler mit konkretem nächsten Schritt.
Toaster einmal im Root gemountet.