Docs/AlertDialog

AlertDialog

Confirmation modal with destructive action support.

Usage

tsx

1'use client'
2import { useRef } from 'react'
3import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel, Button } from '@storm-ds/ui'
4
5function MyAlert() {
6  const ref = useRef<HTMLDialogElement>(null)
7  return (
8    <>
9      <Button onClick={() => ref.current?.showModal()}>Delete</Button>
10      <AlertDialog ref={ref}>
11        <AlertDialogContent>
12          <AlertDialogHeader>
13            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
14            <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
15          </AlertDialogHeader>
16          <AlertDialogFooter>
17            <AlertDialogCancel onClick={() => ref.current?.close()}>Cancel</AlertDialogCancel>
18            <AlertDialogAction variant="destructive" onClick={() => ref.current?.close()}>Delete</AlertDialogAction>
19          </AlertDialogFooter>
20        </AlertDialogContent>
21      </AlertDialog>
22    </>
23  )
24}

Destructive Action

tsx

1'use client'
2import { useRef } from 'react'
3import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@storm-ds/ui'
4
5function DeleteAlert() {
6  const ref = useRef<HTMLDialogElement>(null)
7  return (
8    <AlertDialog ref={ref}>
9      <AlertDialogContent>
10        <AlertDialogHeader>
11          <AlertDialogTitle>Delete item?</AlertDialogTitle>
12          <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
13        </AlertDialogHeader>
14        <AlertDialogFooter>
15          <AlertDialogCancel onClick={() => ref.current?.close()}>Cancel</AlertDialogCancel>
16          <AlertDialogAction variant="destructive" onClick={() => ref.current?.close()}>Delete</AlertDialogAction>
17        </AlertDialogFooter>
18      </AlertDialogContent>
19    </AlertDialog>
20  )
21}

Confirm Action

tsx

1<AlertDialog ref={ref}>
2  <AlertDialogContent>
3    <AlertDialogHeader>
4      <AlertDialogTitle>Confirm action</AlertDialogTitle>
5      <AlertDialogDescription>Are you sure you want to proceed?</AlertDialogDescription>
6    </AlertDialogHeader>
7    <AlertDialogFooter>
8      <AlertDialogCancel onClick={() => ref.current?.close()}>No</AlertDialogCancel>
9      <AlertDialogAction onClick={() => ref.current?.close()}>Yes</AlertDialogAction>
10    </AlertDialogFooter>
11  </AlertDialogContent>
12</AlertDialog>

Note

Extends Dialog with default centered layout and action buttons. Use AlertDialogAction variant="destructive" for dangerous actions shown in red.

Props

Prop	Type	Default	Description
ref	Ref<HTMLDialogElement>	-	Ref to control open/close via showModal()/close()
size	'sm' \| 'md' \| 'lg' \| 'xl'	'md'	Dialog width
className	string	-	Custom classes on AlertDialog

Use with AI

Create a Next.js client component using Storm UI's AlertDialog. Import: `import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel, Button } from '@storm-ds/ui'`. Uses 'use client' and useRef to native <dialog>. Open with ref.current?.showModal(), close with ref.current?.close(). Use AlertDialogAction variant="destructive" to show the action button in red for dangerous operations. Use AlertDialogCancel for the cancel button. Example: `const ref = useRef(null); <Button onClick={() => ref.current?.showModal()}>Delete</Button><AlertDialog ref={ref}><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Delete?</AlertDialogTitle><AlertDialogDescription>Cannot undo</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel onClick={() => ref.current?.close()}>Cancel</AlertDialogCancel><AlertDialogAction variant="destructive" onClick={() => ref.current?.close()}>Delete</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>`

Dialog

DropdownMenu