React AlertDialog: examples and API

Preview

Live preview

Changes apply to this preview only.

Width adapts to the available space

"use client";

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

export function DemoExample() {
  return (
    <AlertDialog>
      <AlertDialogTrigger>
        <Button variant="danger" appearance="soft">Delete workspace</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Delete workspace?</AlertDialogTitle>
          <AlertDialogDescription>
            Every project, deployment and token in this workspace will be
            removed. This cannot be undone.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>
            <Button appearance="outline">Cancel</Button>
          </AlertDialogCancel>
          <AlertDialogAction>
            <Button variant="danger">Delete permanently</Button>
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

More examples

Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.

Archive with a reported result

Explicit confirmation changes local application state and returns focus to its trigger.

Open preview

Non-destructive confirmation

The same structure for an action that is important but reversible.

Open preview

Content

Any content can sit between the header and the footer.

Open preview

Usage

Reserve interruptive confirmation for consequential actions and use precise button labels.

API reference

Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.

PimoluAlertDialogProps

Type source

PimoluAlertDialogProps public API
Name	Type	Default	Description
`children`Required	`ReactNode`	—	Trigger, content, header, footer and close controls.
`open`	`boolean \| undefined`	—	Controlled open state. Omit to let the component own it.
`defaultOpen`	`boolean \| undefined`	`false`	Initial open state when uncontrolled. Defaults to false.
`onOpenChange`	`((open: boolean) => void) \| undefined`	—	Called whenever the component asks to open or close.

childrenRequired: ReactNode
No default extracted.
Trigger, content, header, footer and close controls.
open: boolean | undefined
No default extracted.
Controlled open state. Omit to let the component own it.
defaultOpen: boolean | undefined
Default: false
Initial open state when uncontrolled. Defaults to false.
onOpenChange: ((open: boolean) => void) | undefined
No default extracted.
Called whenever the component asks to open or close.

PimoluAlertDialogContentProps

Type source

PimoluAlertDialogContentProps public API
Name	Type	Default	Description
`className`	`string \| undefined`	—	Class applied to the panel.
`aria-describedby`	`string \| undefined`	—	Overrides the id registered by `DialogDescription`.
`aria-label`	`string \| undefined`	—	Accessible name of the dialog. Use it only when there is no `DialogTitle`; a title automatically names the dialog.
`aria-labelledby`	`string \| undefined`	—	Overrides the id registered by `DialogTitle`.
`children`	`ReactNode`	—	Header, body and footer of the dialog.
`size`	`"sm" \| "md" \| "lg" \| undefined`	`"md"`	Maximum width of the panel. Defaults to "md".
`closeOnOverlayClick`	`boolean \| undefined`	`true`	Close when the overlay is pressed. Defaults to true.
`closeOnEscape`	`boolean \| undefined`	`true`	Close on Escape. Defaults to true.
`showCloseButton`	`boolean \| undefined`	`true`	Render the close button in the top corner. Defaults to true.
`closeLabel`	`string \| undefined`	`"Close"`	Accessible name of the corner close button. Defaults to "Close".

className: string | undefined
No default extracted.
Class applied to the panel.
aria-describedby: string | undefined
No default extracted.
Overrides the id registered by `DialogDescription`.
aria-label: string | undefined
No default extracted.
Accessible name of the dialog. Use it only when there is no `DialogTitle`; a title automatically names the dialog.
aria-labelledby: string | undefined
No default extracted.
Overrides the id registered by `DialogTitle`.
children: ReactNode
No default extracted.
Header, body and footer of the dialog.
size: "sm" | "md" | "lg" | undefined
Default: "md"
Maximum width of the panel. Defaults to "md".
closeOnOverlayClick: boolean | undefined
Default: true
Close when the overlay is pressed. Defaults to true.
closeOnEscape: boolean | undefined
Default: true
Close on Escape. Defaults to true.
showCloseButton: boolean | undefined
Default: true
Render the close button in the top corner. Defaults to true.
closeLabel: string | undefined
Default: "Close"
Accessible name of the corner close button. Defaults to "Close".

PimoluAlertDialogActionProps

Type source

PimoluAlertDialogActionProps public API
Name	Type	Default	Description
`children`Required	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Usually a Button; it closes the dialog when activated.

childrenRequired: ReactElement<unknown, string | JSXElementConstructor<any>>
No default extracted.
Usually a Button; it closes the dialog when activated.

Accessibility

Check the named alert dialog, safe initial focus, Escape and restoration to the trigger.

Read the accessibility guide →

Related components

Customization Accessibility