Dialog

Modales Dialogfenster auf Basis des nativen <dialog>-Elements. Beinhaltet automatischen Focus-Trap (der Fokus verläuft den Dialog nicht), Schliessen per Escape-Taste, Klick auf den Backdrop und einen Close-Button. Kein externer State notwendig.

Standard-Dialog mit Footer

Der häufigste Anwendungsfall: Eine Bestätigung oder ein wichtiger Hinweis mit zwei Aktionsbuttons. Der Dialog öffnet sich über dem restlichen Inhalt; der Hintergrund wird abgedunkelt. Tastaturnutzer können den Dialog nur über die darin enthaltenen Elemente bedienen.

Bestätigung: Vertrag kündigen

Kndigung bestätigen – typisches Muster für destruktive Aktionen.

<Button data-dialog-open="kuendigung-dialog">
  Vertrag kündigen
</Button>

<Dialog
  id="kuendigung-dialog"
  title="Vertrag wirklich kündigen?"
  description="Diese Aktion kann nicht rückgängig gemacht werden."
>
  <p>
    Ihr Stromvertrag (Nr. 48221) endet dann zum nächstmöglichen
    Termin. Sie erhalten eine Bestätigungs-E-Mail.
  </p>
  <div slot="footer">
    <Button variant="ghost" data-dialog-close>Abbrechen</Button>
    <Button variant="destructive">Jetzt kündigen</Button>
  </div>
</Dialog>

Einfacher Hinweis-Dialog

Manchmal reicht ein kurzer Hinweis ohne Fusszeile. Der Nutzer kann den Dialog per Escape, Backdrop-Klick oder dem X-Button schließen. Kein slot="footer" notwendig.

Wartungshinweis

<Button variant="outline" data-dialog-open="wartung-dialog">
  Wartungsinfo
</Button>

<Dialog id="wartung-dialog" title="Geplante Wartungsarbeiten">
  <p>
    Am 14. April 2026 von 02:00 bis 05:00 Uhr finden planmäßige
    Wartungsarbeiten am Online-Kundencenter statt. In dieser Zeit
    ist das Portal nicht erreichbar.
  </p>
</Dialog>

Installation

cp-components add dialog