AlertDialog

Confirms an irreversible action: names it, says the consequence, can ask for typed confirmation.

<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
Defaults to "Cancel" in the provider's language.
confirmLabel
string
The confirm label, the verb and object: "Delete key".
confirmText
string
Typed confirmation: the person types this to enable the confirm.
defaultOpen
boolean
Whether it starts open, when the component keeps its own state.
description
ReactNode
The practical consequence.
inline
boolean
Renders in place, without a trigger, for review pages and tests.
loading
boolean
Shows a spinner on the confirm while work runs (also automatic for a promise).
onConfirm
() => void | Promise<void>
Called when the action is confirmed; return a promise to keep the dialog busy until it ends. It closes when the promise resolves and stays open for another try when it rejects, so toast the error there.
onOpenChange
((open: boolean) => void)
Called when it opens or closes.
open
boolean
Whether it is open, when you control it.
title
ReactNode
Names the action: "Delete this key?"
tone
"warning" | "danger" | "info"
How serious the confirmation is; danger for actions that can't be undone.
trigger
ReactElement<unknown, string | JSXElementConstructor<any>>
The element that opens it.