Alert Dialog

AlertAspect Ratio

A confirmation dialog that needs an explicit yes or no.

Installation

pnpm add krz-ui

Usage

import { AlertDialog } from "krz-ui";
<AlertDialog
  open={open}
  title="Delete project?"
  description="This permanently deletes the project and its data."
  confirmLabel="Delete"
  variant="danger"
  onConfirm={deleteProject}
  onCancel={() => setOpen(false)}
/>

API Reference

PropTypeDescription
openbooleanWhether the dialog is visible.
onConfirm / onCancel() => voidCalled by the buttons. Escape also cancels; the backdrop doesn't.
title / descriptionReactNodeWhat the user is confirming.
confirmLabel / cancelLabelReactNodeButton text. Defaults to Continue / Cancel.
variant"primary" | "danger"Use danger for destructive actions.
loadingbooleanShows a spinner on the confirm button and blocks closing.
className / style / ref—All go to the dialog panel. Style the backdrop with classNames.overlay. See Customization.
classNames{ root?, overlay?, header?, title?, description?, close?, body?, footer?, cancel?, confirm? }Extra classes for inner parts.