Component

AlertDialog

A dialog that is used to display a message to the user. It is used to confirm or cancel an action.

preview

React
"use client"
import AlertDialog from "@radui/ui/AlertDialog";

const AlertDialogExample = () => {
  return (
    <div className="w-64 md:w-96 flex justify-center items-center">
      <AlertDialog.Root>
        <AlertDialog.Trigger>
          Open Dialog
        </AlertDialog.Trigger>
        <AlertDialog.Portal>
          <AlertDialog.Overlay />
          <AlertDialog.Content>
            <AlertDialog.Title>
              Are you sure you want to delete this file?
            </AlertDialog.Title>
            <AlertDialog.Description>
              This action cannot be undone.
            </AlertDialog.Description>
            <AlertDialog.Footer>
              <AlertDialog.Cancel>
                Cancel
              </AlertDialog.Cancel>
              <AlertDialog.Action>
                Delete
              </AlertDialog.Action>
            </AlertDialog.Footer>
          </AlertDialog.Content>
        </AlertDialog.Portal>
      </AlertDialog.Root>
    </div>)
}

export default AlertDialogExample;

API Documentation

Anatomy

Import all parts of the component and piece them together

React
import AlertDialog from "@radui/ui/AlertDialog";

export default () => {
    return (
        <AlertDialog.Root>
            <AlertDialog.Trigger>Open alert</AlertDialog.Trigger>
            <AlertDialog.Portal>
                <AlertDialog.Overlay/>
                <AlertDialog.Content>
                    <AlertDialog.Title>Alert dialog title</AlertDialog.Title>
                    <AlertDialog.Description>Alert dialog description</AlertDialog.Description>
                    <AlertDialog.Footer>
                        <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
                        <AlertDialog.Action>Confirm</AlertDialog.Action>
                    </AlertDialog.Footer>
                </AlertDialog.Content>
            </AlertDialog.Portal>
        </AlertDialog.Root>
    )
}

Root

The root component for the AlertDialog.

Prop	Type	Default
className	string	--
customRootClass	string	--
open	boolean	--
defaultOpen	boolean	false
onOpenChange	function	--
dismissOnOutsidePress	boolean	false

Trigger

The trigger component for the AlertDialog.

Prop	Type	Default
className	string	--
asChild	boolean	false

Portal

The portal component for the AlertDialog.

Prop	Type	Default
children	ReactNode	--
container	Element \| null	--
forceMount	boolean	false
keepMounted	boolean	false

Overlay

The overlay component for the AlertDialog.

Prop	Type	Default
className	string	''
asChild	boolean	false
forceMount	boolean	false

Content

The content component for the AlertDialog.

Prop	Type	Default
className	string	''
children	ReactNode	--
asChild	boolean	false
forceMount	boolean	false

Title

The title component for the AlertDialog.

Prop	Type	Default
className	string	''
children	ReactNode	--
asChild	boolean	false
id	string	auto

Description

The description component for the AlertDialog.

Prop	Type	Default
className	string	''
children	ReactNode	--
asChild	boolean	false
id	string	auto

A layout container for alert dialog actions.

Prop	Type	Default
className	string	''

Action

The action component for the AlertDialog.

Prop	Type	Default
className
children	ReactNode	--
asChild	boolean	false

Cancel

The cancel component for the AlertDialog.

Prop	Type	Default
className
children	ReactNode	--
asChild	boolean	false

Keyboard Interactions

Shortcut	Description
`Escape`	Closes the alert dialog when cancel or dismiss behavior is available.
`Tab`	Moves focus to the next focusable control inside the alert dialog.
`Shift + Tab`	Moves focus to the previous focusable control inside the alert dialog.

ARIA References

Reference	What Rad UI follows
Alert dialog pattern	Uses alert dialog semantics for confirmation flows that interrupt the current task and require a response.
Dialog modal pattern	Inherits modal dialog focus containment, labelling, description, and focus restoration expectations.