Docs
Dialog

Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Radix UIAPI Reference

Usage

import shadcn.ui.components.Dialog
import shadcn.ui.components.DialogContent
import shadcn.ui.components.DialogDescription
import shadcn.ui.components.DialogHeader
import shadcn.ui.components.DialogTitle
import shadcn.ui.components.DialogTrigger

Dialog {
    DialogTrigger { + "Open" }
    DialogContent {
        DialogHeader {
            DialogTitle { + "Are you sure absolutely sure?" }
            DialogDescription {
                + "This action cannot be undone. This will permanently delete your account "
                + "and remove your data from our servers."
            }
        }
    }
}

Notes

To activate the Dialog component from within a Context Menu or Dropdown Menu, you must encase the Context Menu or Dropdown Menu component in the Dialog component. For more information, refer to the linked issue here.

Dialog {
    ContextMenu {
        ContextMenuTrigger { +"Right click" }
        ContextMenuContent {
            ContextMenuItem { +"Open" }
            ContextMenuItem { +"Download" }
            DialogTrigger {
                asChild = true
                ContextMenuItem {
                    span { +"Delete" }
                }
            }
        }
    }
    DialogContent {
        DialogHeader {
            DialogTitle { +"Are you sure absolutely sure?" }
            DialogDescription {
                +"This action cannot be undone. This will permanently delete your account "
                +"and remove your data from our servers."
            }
        }
        DialogFooter {
            Button {
                type = ButtonType.submit
                +"Confirm"
            }
        }
    }
}
Date PickerDropdown Menu