AlertDialog

Bestätigt eine Aktion, die sich nicht rückgängig machen lässt: nennt sie, sagt, was folgt, und kann eine getippte Bestätigung verlangen.

Quelltext

<AlertDialog
      trigger={<Button variant="danger-secondary">Delete key</Button>}
      title="Delete this key?"
      description="Applications using checkout-web will stop authenticating with the gateway."
      confirmLabel="Delete key"
      onConfirm={() => new Promise((r) => setTimeout(r, 900))}
    />

import { AlertDialog } from "@logicplanes/kaeso-ui";

Props

cancelLabel
string
Standardmäßig „Abbrechen“ in der Sprache des LocaleProvider.
confirmLabel
string
Die Beschriftung der Bestätigung, Verb und Objekt: „Schlüssel löschen“.
confirmText
string
Getippte Bestätigung: Erst wenn dieser Text eingegeben ist, lässt sich bestätigen.
defaultOpen
boolean
Ob es anfangs geöffnet ist, wenn die Komponente ihren Zustand selbst verwaltet.
description
ReactNode
Was praktisch daraus folgt.
inline
boolean
Rendert an Ort und Stelle, ohne Auslöser, für Prüfseiten und Tests.
loading
boolean
Zeigt einen Spinner auf der Bestätigung, solange die Arbeit läuft (bei einem Promise automatisch).
onConfirm
() => void | Promise<void>
Wird aufgerufen, wenn die Aktion bestätigt ist; geben Sie ein Promise zurück, damit der Dialog beschäftigt bleibt, bis es endet. Er schließt sich, wenn das Promise erfüllt wird, und bleibt für einen weiteren Versuch offen, wenn es abgelehnt wird; zeigen Sie den Fehler dann als Toast.
onOpenChange
((open: boolean) => void)
Wird aufgerufen, wenn es sich öffnet oder schließt.
open
boolean
Ob es geöffnet ist, bei gesteuertem Zustand.
title
ReactNode
Nennt die Aktion: „Diesen Schlüssel löschen?“
tone
"warning" | "danger" | "info"
Wie schwer die Bestätigung wiegt; danger für Aktionen, die sich nicht rückgängig machen lassen.
trigger
ReactElement<unknown, string | JSXElementConstructor<any>>
Das Element, das es öffnet.