Circle V2 API Docs
    Preparing search index...

    Interface DialogRootProps

    interface DialogRootProps {
        "aria-label"?: string;
        children: ReactNode;
        closeOnEscape?: boolean;
        closeOnInteractOutside?: boolean;
        contained?: ConditionalValue<boolean | undefined>;
        defaultOpen?: boolean;
        finalFocusEl?: () => MaybeElement;
        id?: string;
        ids?: Partial<
            {
                backdrop: string;
                closeTrigger: string;
                content: string;
                description: string;
                positioner: string;
                title: string;
                trigger: string;
            },
        >;
        immediate?: boolean;
        initialFocusEl?: () => MaybeElement;
        lazyMount?: boolean;
        modal?: boolean;
        onEscapeKeyDown?: (event: KeyboardEvent) => void;
        onExitComplete?: VoidFunction;
        onFocusOutside?: (event: Combobox.FocusOutsideEvent) => void;
        onInteractOutside?: (event: Combobox.InteractOutsideEvent) => void;
        onOpenChange?: (details: OpenChangeDetails) => void;
        onPointerDownOutside?: (event: Combobox.PointerDownOutsideEvent) => void;
        onRequestDismiss?: (event: LayerDismissEvent) => void;
        open?: boolean;
        persistentElements?: (() => Element | null)[];
        placement?: ConditionalValue<
            "bottom"
            | "top"
            | "end"
            | "start"
            | undefined,
        >;
        present?: boolean;
        preventScroll?: boolean;
        recipe?: SlotRecipeDefinition<string, SlotRecipeVariantRecord<string>>;
        restoreFocus?: boolean;
        role?: "dialog" | "alertdialog";
        size?: ConditionalValue<
            "sm"
            | "md"
            | "lg"
            | "xl"
            | "xs"
            | "full"
            | undefined,
        >;
        skipAnimationOnMount?: boolean;
        trapFocus?: boolean;
        unmountOnExit?: boolean;
        unstyled?: boolean;
    }

    Hierarchy

    • DrawerRootBaseProps
      • DialogRootProps
    Index

    Properties

    aria-label? children closeOnEscape? closeOnInteractOutside? contained? defaultOpen? finalFocusEl? id? ids? immediate? initialFocusEl? lazyMount? modal? onEscapeKeyDown? onExitComplete? onFocusOutside? onInteractOutside? onOpenChange? onPointerDownOutside? onRequestDismiss? open? persistentElements? placement? present? preventScroll? recipe? restoreFocus? role? size? skipAnimationOnMount? trapFocus? unmountOnExit? unstyled?

    Properties

    "aria-label"?: string

    Human readable label for the dialog, in event the dialog title is not rendered

    children: ReactNode
    closeOnEscape?: boolean

    Whether to close the dialog when the escape key is pressed

    true
    closeOnInteractOutside?: boolean

    Whether to close the dialog when the outside is clicked

    true
    contained?: ConditionalValue<boolean | undefined>
    defaultOpen?: boolean

    The initial open state of the dialog when rendered. Use when you don't need to control the open state of the dialog.

    false
    finalFocusEl?: () => MaybeElement

    Element to receive focus when the dialog is closed

    id?: string

    The unique identifier of the machine.

    ids?: Partial<
        {
            backdrop: string;
            closeTrigger: string;
            content: string;
            description: string;
            positioner: string;
            title: string;
            trigger: string;
        },
    >

    The ids of the elements in the dialog. Useful for composition.

    immediate?: boolean

    Whether to synchronize the present change immediately or defer it to the next frame

    initialFocusEl?: () => MaybeElement

    Element to receive focus when the dialog is opened

    lazyMount?: boolean

    Whether to enable lazy mounting

    false
    modal?: boolean

    Whether to prevent pointer interaction outside the element and hide all content below it

    true
    onEscapeKeyDown?: (event: KeyboardEvent) => void

    Function called when the escape key is pressed

    onExitComplete?: VoidFunction

    Function called when the animation ends in the closed state

    onFocusOutside?: (event: Combobox.FocusOutsideEvent) => void

    Function called when the focus is moved outside the component

    onInteractOutside?: (event: Combobox.InteractOutsideEvent) => void

    Function called when an interaction happens outside the component

    onOpenChange?: (details: OpenChangeDetails) => void

    Function to call when the dialog's open state changes

    onPointerDownOutside?: (event: Combobox.PointerDownOutsideEvent) => void

    Function called when the pointer is pressed down outside the component

    onRequestDismiss?: (event: LayerDismissEvent) => void

    Function called when this layer is closed due to a parent layer being closed

    open?: boolean

    The controlled open state of the dialog

    persistentElements?: (() => Element | null)[]

    Returns the persistent elements that:

    • should not have pointer-events disabled
    • should not trigger the dismiss event
    placement?: ConditionalValue<"bottom" | "top" | "end" | "start" | undefined>
    "end"
    present?: boolean

    Whether the node is present (controlled by the user)

    preventScroll?: boolean

    Whether to prevent scrolling behind the dialog when it's opened

    true
    recipe?: SlotRecipeDefinition<string, SlotRecipeVariantRecord<string>>
    restoreFocus?: boolean

    Whether to restore focus to the element that had focus before the dialog was opened

    role?: "dialog" | "alertdialog"

    The dialog's role

    "dialog"
    size?: ConditionalValue<"sm" | "md" | "lg" | "xl" | "xs" | "full" | undefined>
    "xs"
    skipAnimationOnMount?: boolean

    Whether to allow the initial presence animation.

    false
    trapFocus?: boolean

    Whether to trap focus inside the dialog when it's opened

    true
    unmountOnExit?: boolean

    Whether to unmount on exit.

    false
    unstyled?: boolean

    If true, the element will opt out of the theme styles.

    Settings

    Member Visibility

    On This Page

    Properties