Alert dialog

Dialog that asks the user to confirm or cancel an action.

Browsers: Chrome 123+, Firefox 121+, Safari 17.5+
Tier: 0
Bundle compressed: 659 B
Forced layout budget: 0 ms
Axe budget: 0
SSR compatible: Yes
Published contract: Test harness

Playground

OverviewPlayground

React

Tailwind

import { AlertDialog } from "@gunkin/uiify";

export default function Example() {
  return (
    <AlertDialog
      id="delete-dialog"
      trigger="Delete item"
      title="Delete item?"
      description="This action cannot be undone."
    />
  );
}

API

AlertDialog

Prop	Type	Default	Description
`id`	`string`	—	—
`trigger`	`ReactNode`	—	—
`title`	`ReactNode`	—	—
`description`	`ReactNode`	—	—
`children`	`ReactNode`	—	—
`actionLabel`	`ReactNode`	`"Confirm"`	—
`cancelLabel`	`ReactNode`	`"Cancel"`	—
`slotProps`	`AlertDialogSlotProps`	—	Native props for each generated part; the AlertDialog root takes props directly.

AlertDialogAction

Prop	Type	Default	Description
`children`	`ReactNode`	—	—
`target`	`string`	—	—
`command`	`string`	—	—
`commandfor`	`string`	—	—
`as`	`ElementType & ("button" \| ComponentType<any>)`	—	`"button"` (default) or a component that forwards props and ref to a native <button>.
`render`	`never`	—	—

AlertDialogCancel

Prop	Type	Default	Description
`children`	`ReactNode`	—	—
`target`	`string`	—	—
`command`	`string`	—	—
`commandfor`	`string`	—	—
`as`	`ElementType & ("button" \| ComponentType<any>)`	—	`"button"` (default) or a component that forwards props and ref to a native <button>.
`render`	`never`	—	—

AlertDialogContent

Prop	Type	Default	Description
`children`	`ReactNode`	—	—
`id`	`string`	—	—

AlertDialogTrigger

Prop	Type	Default	Description
`children`	`ReactNode`	—	—
`target`	`string`	—	`id` of the `AlertDialogContent` this button opens.
`command`	`string`	—	—
`commandfor`	`string`	—	—
`as`	`ElementType & ("button" \| ComponentType<any>)`	—	`"button"` (default) or a component that forwards props and ref to a native <button>.
`render`	`never`	—	—

Keyboard

Key	Action
`Escape`	Cancel and close the dialog
`Tab`	Cycle focus between Cancel and Action

Accessibility

Native <dialog role="alertdialog"> opened by a command="show-modal" invoker before any JavaScript runs. The browser owns modality, focus containment, Escape and focus return. Cancel renders before Action, so focus starts on the safe choice; both close the dialog, and the application action belongs on Action. When composing parts, point aria-labelledby and aria-describedby on AlertDialogContent at the title and description ids.

Styling hooks

--uiify-trigger-openinside .uiify-alert-dialog