Component

Dialog

A dialog that is used to display a message to the user. It is used to display information and let the user interact with the content.

View component changelog

preview

React
"use client"

import Dialog from "@radui/ui/Dialog";
import { X } from "lucide-react";

const DialogExample = () => {
  return (
    <div className="w-64 md:w-96 flex justify-center items-center">
      <Dialog.Root>
        <Dialog.Trigger>
          Open Dialog
        </Dialog.Trigger>
        <Dialog.Portal>
          <Dialog.Overlay />
          <Dialog.Content>
            <Dialog.Title>
              This message will self destruct in 10 seconds
            </Dialog.Title>
            <Dialog.Description>
              Just kidding, it will not self destruct.
            </Dialog.Description>
            <Dialog.Close aria-label="Close">
              <CloseIcon />
            </Dialog.Close>
          </Dialog.Content>
        </Dialog.Portal>
      </Dialog.Root>
    </div>)
}

const CloseIcon = ()=> <X size={15} strokeWidth={2} aria-hidden="true" />

export default DialogExample;

API Documentation

Anatomy

Import all parts of the component and piece them together

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

export default () => {
    return (
        <Dialog.Root>
            <Dialog.Trigger>Open dialog</Dialog.Trigger>
            <Dialog.Portal>
                <Dialog.Overlay/>
                <Dialog.Content>
                    <Dialog.Title>Dialog title</Dialog.Title>
                    <Dialog.Description>Dialog description</Dialog.Description>
                    <Dialog.Footer>
                        <Dialog.Close>Close</Dialog.Close>
                    </Dialog.Footer>
                </Dialog.Content>
            </Dialog.Portal>
        </Dialog.Root>
    )
}

Root

The root component for the Dialog.

Prop	Type	Default
className	string	--
customRootClass	string	--
open	boolean	--
children	ReactNode	--
defaultOpen	boolean	false
onOpenChange	function	--
onClickOutside	function	--

Trigger

The trigger component for the Dialog.

Prop	Type	Default
className	string	--
asChild	boolean	false

Portal

The portal component for the Dialog.

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

Overlay

The overlay component for the Dialog.

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

Content

The content component for the Dialog.

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

Title

The title component for the Dialog.

Prop	Type	Default
className	string	''
children	ReactNode	--

Description

The description component for the Dialog.

Prop	Type	Default
className	string	''
children	ReactNode	--

A layout container for dialog actions.

Prop	Type	Default
className	string	''

Close

The close component for the Dialog.

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

Keyboard Interactions

Shortcut	Description
`Escape`	Closes the dialog when the close interaction is enabled.
`Tab`	Moves focus to the next focusable element inside the dialog.
`Shift + Tab`	Moves focus to the previous focusable element inside the dialog.

ARIA References

Reference	What Rad UI follows
Dialog modal pattern	Uses modal dialog semantics with labelled content, description support, focus containment, and dismiss behavior.