Alert Dialog

@/components/kamod-ui/alert-dialog

Installation

Import alert dialog primitives from `@/components/kamod-ui/alert-dialog`.

pnpm add @kamod-ch/ui

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger } from "@/components/kamod-ui/alert-dialog";

Usage

Compose Trigger (often asChild + Button), Content, Header (title + description), and Footer (Cancel + Action). Cancel and Action close the dialog on click.

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/kamod-ui/alert-dialog";

<AlertDialog>
  <AlertDialogTrigger>Delete account</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Delete account?</AlertDialogTitle>
      <AlertDialogDescription>
        This action is permanent.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Open</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Title</AlertDialogTitle>
      <AlertDialogDescription>Description</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Basic

Title, description, cancel and continue — matches the shadcn demo.

Small

Use size="sm" on AlertDialogContent for a narrower panel.

Media

AlertDialogMedia centers an icon or graphic above the title.

Small with media

Combine size="sm" with AlertDialogMedia for compact hardware-style prompts.

Destructive

Style media with destructive tokens; use variant="destructive" on AlertDialogAction and variant="outline" on Cancel.

API Reference

Props overview.

AlertDialog

Same as Dialog with lockBodyScroll; use for blocking confirmations.

Prop	Type	Default
defaultOpen	`boolean`	`false`
open	`boolean`	`-`
onOpenChange	`(open: boolean) => void`	`-`
class	`string`	`-`

AlertDialogTrigger

Prop	Type	Default
asChild	`boolean`	`false`
class	`string`	`-`

AlertDialogContent

Prop	Type	Default
size	`"default" \| "sm"`	`"default"`
forceMount	`boolean`	`false`
class	`string`	`-`

AlertDialogHeader

Prop	Type	Default
class	`string`	`-`

AlertDialogMedia

Circular muted icon slot above title.

Prop	Type	Default
class	`string`	`-`

AlertDialogTitle

Prop	Type	Default
class	`string`	`-`

AlertDialogDescription

Prop	Type	Default
class	`string`	`-`

AlertDialogFooter

Prop	Type	Default
class	`string`	`-`

AlertDialogCancel

Prop	Type	Default
variant	`Button variant`	`"outline"`
asChild	`boolean`	`false`
class	`string`	`-`

AlertDialogAction

Prop	Type	Default
variant	`Button variant`	`"default"`
asChild	`boolean`	`false`
class	`string`	`-`

Accessibility Notes

Use Alert Dialog with clear labels, keyboard-friendly interactions and semantic structure.