AlertDialog

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

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	--

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