Backstage
    Preparing search index...

    Interface DialogProps

    Props for the Dialog component.

    interface DialogProps {
        children?: ReactNode;
        className?: string;
        defaultOpen?: boolean;
        dir?: string;
        height?: string | number;
        hidden?: boolean;
        inert?: boolean;
        isDismissable?: boolean;
        isEntering?: boolean;
        isExiting?: boolean;
        isKeyboardDismissDisabled?: boolean;
        isOpen?: boolean;
        lang?: string;
        onAnimationEnd?: AnimationEventHandler<HTMLDivElement>;
        onAnimationEndCapture?: AnimationEventHandler<HTMLDivElement>;
        onAnimationIteration?: AnimationEventHandler<HTMLDivElement>;
        onAnimationIterationCapture?: AnimationEventHandler<HTMLDivElement>;
        onAnimationStart?: AnimationEventHandler<HTMLDivElement>;
        onAnimationStartCapture?: AnimationEventHandler<HTMLDivElement>;
        onAuxClick?: MouseEventHandler<HTMLDivElement>;
        onAuxClickCapture?: MouseEventHandler<HTMLDivElement>;
        onClick?: MouseEventHandler<HTMLDivElement>;
        onClickCapture?: MouseEventHandler<HTMLDivElement>;
        onContextMenu?: MouseEventHandler<HTMLDivElement>;
        onContextMenuCapture?: MouseEventHandler<HTMLDivElement>;
        onDoubleClick?: MouseEventHandler<HTMLDivElement>;
        onDoubleClickCapture?: MouseEventHandler<HTMLDivElement>;
        onGotPointerCapture?: PointerEventHandler<HTMLDivElement>;
        onGotPointerCaptureCapture?: PointerEventHandler<HTMLDivElement>;
        onLostPointerCapture?: PointerEventHandler<HTMLDivElement>;
        onLostPointerCaptureCapture?: PointerEventHandler<HTMLDivElement>;
        onMouseDown?: MouseEventHandler<HTMLDivElement>;
        onMouseDownCapture?: MouseEventHandler<HTMLDivElement>;
        onMouseEnter?: MouseEventHandler<HTMLDivElement>;
        onMouseLeave?: MouseEventHandler<HTMLDivElement>;
        onMouseMove?: MouseEventHandler<HTMLDivElement>;
        onMouseMoveCapture?: MouseEventHandler<HTMLDivElement>;
        onMouseOut?: MouseEventHandler<HTMLDivElement>;
        onMouseOutCapture?: MouseEventHandler<HTMLDivElement>;
        onMouseOver?: MouseEventHandler<HTMLDivElement>;
        onMouseOverCapture?: MouseEventHandler<HTMLDivElement>;
        onMouseUp?: MouseEventHandler<HTMLDivElement>;
        onMouseUpCapture?: MouseEventHandler<HTMLDivElement>;
        onOpenChange?: (isOpen: boolean) => void;
        onPointerCancel?: PointerEventHandler<HTMLDivElement>;
        onPointerCancelCapture?: PointerEventHandler<HTMLDivElement>;
        onPointerDown?: PointerEventHandler<HTMLDivElement>;
        onPointerDownCapture?: PointerEventHandler<HTMLDivElement>;
        onPointerEnter?: PointerEventHandler<HTMLDivElement>;
        onPointerLeave?: PointerEventHandler<HTMLDivElement>;
        onPointerMove?: PointerEventHandler<HTMLDivElement>;
        onPointerMoveCapture?: PointerEventHandler<HTMLDivElement>;
        onPointerOut?: PointerEventHandler<HTMLDivElement>;
        onPointerOutCapture?: PointerEventHandler<HTMLDivElement>;
        onPointerOver?: PointerEventHandler<HTMLDivElement>;
        onPointerOverCapture?: PointerEventHandler<HTMLDivElement>;
        onPointerUp?: PointerEventHandler<HTMLDivElement>;
        onPointerUpCapture?: PointerEventHandler<HTMLDivElement>;
        onScroll?: UIEventHandler<HTMLDivElement>;
        onScrollCapture?: UIEventHandler<HTMLDivElement>;
        onTouchCancel?: TouchEventHandler<HTMLDivElement>;
        onTouchCancelCapture?: TouchEventHandler<HTMLDivElement>;
        onTouchEnd?: TouchEventHandler<HTMLDivElement>;
        onTouchEndCapture?: TouchEventHandler<HTMLDivElement>;
        onTouchMove?: TouchEventHandler<HTMLDivElement>;
        onTouchMoveCapture?: TouchEventHandler<HTMLDivElement>;
        onTouchStart?: TouchEventHandler<HTMLDivElement>;
        onTouchStartCapture?: TouchEventHandler<HTMLDivElement>;
        onTransitionCancel?: TransitionEventHandler<HTMLDivElement>;
        onTransitionCancelCapture?: TransitionEventHandler<HTMLDivElement>;
        onTransitionEnd?: TransitionEventHandler<HTMLDivElement>;
        onTransitionEndCapture?: TransitionEventHandler<HTMLDivElement>;
        onTransitionRun?: TransitionEventHandler<HTMLDivElement>;
        onTransitionRunCapture?: TransitionEventHandler<HTMLDivElement>;
        onTransitionStart?: TransitionEventHandler<HTMLDivElement>;
        onTransitionStartCapture?: TransitionEventHandler<HTMLDivElement>;
        onWheel?: WheelEventHandler<HTMLDivElement>;
        onWheelCapture?: WheelEventHandler<HTMLDivElement>;
        shouldCloseOnInteractOutside?: (element: Element) => boolean;
        slot?: string | null;
        style?: StyleOrFunction<ModalRenderProps>;
        translate?: "yes" | "no";
        UNSTABLE_portalContainer?: Element;
        width?: string | number;
    }

    Hierarchy

    • ModalOverlayProps
      • DialogProps
    Index

    Properties

    children? className? defaultOpen? dir? height? hidden? inert? isDismissable? isEntering? isExiting? isKeyboardDismissDisabled? isOpen? lang? onAnimationEnd? onAnimationEndCapture? onAnimationIteration? onAnimationIterationCapture? onAnimationStart? onAnimationStartCapture? onAuxClick? onAuxClickCapture? onClick? onClickCapture? onContextMenu? onContextMenuCapture? onDoubleClick? onDoubleClickCapture? onGotPointerCapture? onGotPointerCaptureCapture? onLostPointerCapture? onLostPointerCaptureCapture? onMouseDown? onMouseDownCapture? onMouseEnter? onMouseLeave? onMouseMove? onMouseMoveCapture? onMouseOut? onMouseOutCapture? onMouseOver? onMouseOverCapture? onMouseUp? onMouseUpCapture? onOpenChange? onPointerCancel? onPointerCancelCapture? onPointerDown? onPointerDownCapture? onPointerEnter? onPointerLeave? onPointerMove? onPointerMoveCapture? onPointerOut? onPointerOutCapture? onPointerOver? onPointerOverCapture? onPointerUp? onPointerUpCapture? onScroll? onScrollCapture? onTouchCancel? onTouchCancelCapture? onTouchEnd? onTouchEndCapture? onTouchMove? onTouchMoveCapture? onTouchStart? onTouchStartCapture? onTransitionCancel? onTransitionCancelCapture? onTransitionEnd? onTransitionEndCapture? onTransitionRun? onTransitionRunCapture? onTransitionStart? onTransitionStartCapture? onWheel? onWheelCapture? shouldCloseOnInteractOutside? slot? style? translate? UNSTABLE_portalContainer? width?

    Properties

    children?: ReactNode

    The children of the component. A function may be provided to alter the children based on component state.

    className?: string

    The CSS className for the element. A function may be provided to compute the class based on component state.

    defaultOpen?: boolean

    Whether the overlay is open by default (uncontrolled).

    dir?: string
    height?: string | number
    hidden?: boolean
    inert?: boolean
    isDismissable?: boolean

    Whether to close the modal when the user interacts outside it.

    false
    isEntering?: boolean

    Whether the modal is currently performing an entry animation.

    isExiting?: boolean

    Whether the modal is currently performing an exit animation.

    isKeyboardDismissDisabled?: boolean

    Whether pressing the escape key to close the modal should be disabled.

    false
    isOpen?: boolean

    Whether the overlay is open by default (controlled).

    lang?: string
    onAnimationEnd?: AnimationEventHandler<HTMLDivElement>
    onAnimationEndCapture?: AnimationEventHandler<HTMLDivElement>
    onAnimationIteration?: AnimationEventHandler<HTMLDivElement>
    onAnimationIterationCapture?: AnimationEventHandler<HTMLDivElement>
    onAnimationStart?: AnimationEventHandler<HTMLDivElement>
    onAnimationStartCapture?: AnimationEventHandler<HTMLDivElement>
    onAuxClick?: MouseEventHandler<HTMLDivElement>
    onAuxClickCapture?: MouseEventHandler<HTMLDivElement>
    onClick?: MouseEventHandler<HTMLDivElement>
    onClickCapture?: MouseEventHandler<HTMLDivElement>
    onContextMenu?: MouseEventHandler<HTMLDivElement>
    onContextMenuCapture?: MouseEventHandler<HTMLDivElement>
    onDoubleClick?: MouseEventHandler<HTMLDivElement>
    onDoubleClickCapture?: MouseEventHandler<HTMLDivElement>
    onGotPointerCapture?: PointerEventHandler<HTMLDivElement>
    onGotPointerCaptureCapture?: PointerEventHandler<HTMLDivElement>
    onLostPointerCapture?: PointerEventHandler<HTMLDivElement>
    onLostPointerCaptureCapture?: PointerEventHandler<HTMLDivElement>
    onMouseDown?: MouseEventHandler<HTMLDivElement>
    onMouseDownCapture?: MouseEventHandler<HTMLDivElement>
    onMouseEnter?: MouseEventHandler<HTMLDivElement>
    onMouseLeave?: MouseEventHandler<HTMLDivElement>
    onMouseMove?: MouseEventHandler<HTMLDivElement>
    onMouseMoveCapture?: MouseEventHandler<HTMLDivElement>
    onMouseOut?: MouseEventHandler<HTMLDivElement>
    onMouseOutCapture?: MouseEventHandler<HTMLDivElement>
    onMouseOver?: MouseEventHandler<HTMLDivElement>
    onMouseOverCapture?: MouseEventHandler<HTMLDivElement>
    onMouseUp?: MouseEventHandler<HTMLDivElement>
    onMouseUpCapture?: MouseEventHandler<HTMLDivElement>
    onOpenChange?: (isOpen: boolean) => void

    Handler that is called when the overlay's open state changes.

    onPointerCancel?: PointerEventHandler<HTMLDivElement>
    onPointerCancelCapture?: PointerEventHandler<HTMLDivElement>
    onPointerDown?: PointerEventHandler<HTMLDivElement>
    onPointerDownCapture?: PointerEventHandler<HTMLDivElement>
    onPointerEnter?: PointerEventHandler<HTMLDivElement>
    onPointerLeave?: PointerEventHandler<HTMLDivElement>
    onPointerMove?: PointerEventHandler<HTMLDivElement>
    onPointerMoveCapture?: PointerEventHandler<HTMLDivElement>
    onPointerOut?: PointerEventHandler<HTMLDivElement>
    onPointerOutCapture?: PointerEventHandler<HTMLDivElement>
    onPointerOver?: PointerEventHandler<HTMLDivElement>
    onPointerOverCapture?: PointerEventHandler<HTMLDivElement>
    onPointerUp?: PointerEventHandler<HTMLDivElement>
    onPointerUpCapture?: PointerEventHandler<HTMLDivElement>
    onScroll?: UIEventHandler<HTMLDivElement>
    onScrollCapture?: UIEventHandler<HTMLDivElement>
    onTouchCancel?: TouchEventHandler<HTMLDivElement>
    onTouchCancelCapture?: TouchEventHandler<HTMLDivElement>
    onTouchEnd?: TouchEventHandler<HTMLDivElement>
    onTouchEndCapture?: TouchEventHandler<HTMLDivElement>
    onTouchMove?: TouchEventHandler<HTMLDivElement>
    onTouchMoveCapture?: TouchEventHandler<HTMLDivElement>
    onTouchStart?: TouchEventHandler<HTMLDivElement>
    onTouchStartCapture?: TouchEventHandler<HTMLDivElement>
    onTransitionCancel?: TransitionEventHandler<HTMLDivElement>
    onTransitionCancelCapture?: TransitionEventHandler<HTMLDivElement>
    onTransitionEnd?: TransitionEventHandler<HTMLDivElement>
    onTransitionEndCapture?: TransitionEventHandler<HTMLDivElement>
    onTransitionRun?: TransitionEventHandler<HTMLDivElement>
    onTransitionRunCapture?: TransitionEventHandler<HTMLDivElement>
    onTransitionStart?: TransitionEventHandler<HTMLDivElement>
    onTransitionStartCapture?: TransitionEventHandler<HTMLDivElement>
    onWheel?: WheelEventHandler<HTMLDivElement>
    onWheelCapture?: WheelEventHandler<HTMLDivElement>
    shouldCloseOnInteractOutside?: (element: Element) => boolean

    When user interacts with the argument element outside of the overlay ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the overlay. By default, onClose will always be called on interaction outside the overlay ref.

    slot?: string | null

    A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.

    style?: StyleOrFunction<ModalRenderProps>

    The inline style for the element. A function may be provided to compute the style based on component state.

    translate?: "yes" | "no"
    UNSTABLE_portalContainer?: Element

    The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to.

    document.body
    • Use a parent UNSAFE_PortalProvider to set your portal container instead.
    width?: string | number

    Settings

    Member Visibility

    On This Page

    Properties
    childrenclassNamedefaultOpendirheighthiddeninertisDismissableisEnteringisExitingisKeyboardDismissDisabledisOpenlangonAnimationEndonAnimationEndCaptureonAnimationIterationonAnimationIterationCaptureonAnimationStartonAnimationStartCaptureonAuxClickonAuxClickCaptureonClickonClickCaptureonContextMenuonContextMenuCaptureonDoubleClickonDoubleClickCaptureonGotPointerCaptureonGotPointerCaptureCaptureonLostPointerCaptureonLostPointerCaptureCaptureonMouseDownonMouseDownCaptureonMouseEnteronMouseLeaveonMouseMoveonMouseMoveCaptureonMouseOutonMouseOutCaptureonMouseOveronMouseOverCaptureonMouseUponMouseUpCaptureonOpenChangeonPointerCancelonPointerCancelCaptureonPointerDownonPointerDownCaptureonPointerEnteronPointerLeaveonPointerMoveonPointerMoveCaptureonPointerOutonPointerOutCaptureonPointerOveronPointerOverCaptureonPointerUponPointerUpCaptureonScrollonScrollCaptureonTouchCancelonTouchCancelCaptureonTouchEndonTouchEndCaptureonTouchMoveonTouchMoveCaptureonTouchStartonTouchStartCaptureonTransitionCancelonTransitionCancelCaptureonTransitionEndonTransitionEndCaptureonTransitionRunonTransitionRunCaptureonTransitionStartonTransitionStartCaptureonWheelonWheelCaptureshouldCloseOnInteractOutsideslotstyletranslateUNSTABLE_portalContainerwidth