Alert Dialog

Blocking confirmation with action and cancel.

Installation

npx @noarka/cli add alert-dialog

Usage

tsx

import {  AlertDialog,  AlertDialogAction,  AlertDialogCancel,  AlertDialogContent,  AlertDialogDescription,  AlertDialogFooter,  AlertDialogHeader,  AlertDialogTitle,  AlertDialogTrigger,  Button,} from "@noarka/ui";

tsx

<AlertDialog>  <AlertDialogTrigger render={<Button variant="destructive">Delete account</Button>} />  <AlertDialogContent size="sm">    <AlertDialogHeader>      <AlertDialogTitle>Delete account?</AlertDialogTitle>      <AlertDialogDescription>        Your account and all of its data will be permanently removed.      </AlertDialogDescription>    </AlertDialogHeader>    <AlertDialogFooter footer>      <AlertDialogCancel>Cancel</AlertDialogCancel>      <AlertDialogAction>Delete</AlertDialogAction>    </AlertDialogFooter>  </AlertDialogContent></AlertDialog>

Examples

Default size

Roomier dialog for longer explanations. Uses the default size.

Small size

Compact dialog for short confirmations.

API reference

AlertDialog

Prop	Type	Default
`open` Controlled open state. Use with onOpenChange.	`boolean`	`-`
`defaultOpen` Initially open when uncontrolled.	`boolean`	`false`
`onOpenChange` Called when the dialog opens or closes.	`(open: boolean) => void`	`-`
`onOpenChangeComplete` Called after open or close animations finish.	`(open: boolean) => void`	`-`

AlertDialogContent

Prop	Type	Default
`size` Width preset. Both cap at max-w-xs on small screens; default grows to max-w-sm on sm screens and up.	`"default" \| "sm"`	`"default"`
`render` Polymorphic render prop. Use to render a custom element instead of the default popup.	`ReactElement \| ((props) => ReactNode)`	`-`
`className` Additional classes merged with the default content styles.	`string`	`-`

AlertDialogTrigger

Prop	Type	Default
`render` Render a custom trigger element, e.g. render={<Button variant="destructive">Delete</Button>}.	`ReactElement \| ((props) => ReactNode)`	`-`
`disabled` Disable the trigger.	`boolean`	`false`

AlertDialogFooter

Prop	Type	Default
`footer` Show the muted footer band with a top border. Without it the footer is plain with no background or border.	`boolean`	`false`
`className` Additional classes merged with the default footer styles.	`string`	`-`

AlertDialogAction

Prop	Type	Default
`variant` Confirm button style.	`"default" \| "secondary" \| "outline" \| "ghost" \| "destructive" \| "link"`	`"destructive"`
`size` Confirm button size.	`"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"`	`"default"`
`children` Button label.	`ReactNode`	`-`
`className` Additional classes merged with the button styles.	`string`	`-`

AlertDialogCancel

Prop	Type	Default
`variant` Cancel button style.	`"default" \| "secondary" \| "outline" \| "ghost" \| "destructive" \| "link"`	`"outline"`
`size` Cancel button size.	`"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"`	`"default"`
`children` Button label.	`ReactNode`	`-`
`className` Additional classes merged with the button styles.	`string`	`-`