Interface DialogProps

interface DialogProps {
    AppBarProps?: AppBarProps;
    ariaLabel: string;
    autoFocus?: boolean;
    children?: ReactNode;
    customAttributes?: CustomAttribute[];
    disableEnforceFocus?: boolean;
    disableEscapeKeyDown?: boolean;
    disableFocusHeading?: boolean;
    enteringDirection?: EnteringDirectionType;
    hideBackdrop?: boolean;
    id?: string;
    onClose?: ((event: {}, reason: "backdropClick" | "escapeKeyDown") => void);
    open: boolean;
    PaperProps?: Partial<PaperProps<ElementType<any, keyof IntrinsicElements>>>;
    role?: AriaRole;
    sx?: SxProps<Theme>;
    tabIndex?: number;
    title?: string;
    TransitionProps?: TransitionProps;
}

Hierarchy

  • Pick<MuiDialogProps,
        | "PaperProps"
        | "TransitionProps"
        | "autoFocus"
        | "children"
        | "className"
        | "disableEnforceFocus"
        | "disableEscapeKeyDown"
        | "id"
        | "onClose"
        | "open"
        | "role"
        | "sx"
        | "tabIndex"
        | "title"
        | "hideBackdrop">
    • DialogProps

Properties

AppBarProps? ariaLabel autoFocus? children? customAttributes? disableEnforceFocus? disableEscapeKeyDown? disableFocusHeading? enteringDirection? hideBackdrop? id? onClose? open PaperProps? role? sx? tabIndex? title? TransitionProps?

Properties

OptionalAppBarProps

AppBarProps?: AppBarProps

Configuration options for the dialog's app bar component.

ariaLabel

ariaLabel: string

Accessible label for screen readers describing the dialog's purpose. Required for WCAG 2.1 compliance.

OptionalautoFocus

autoFocus?: boolean

Optionalchildren

children?: ReactNode

Dialog children, usually the included sub-components.

OptionalcustomAttributes

customAttributes?: CustomAttribute[]

Array of custom attributes that can be used for testing purposes.

OptionaldisableEnforceFocus

disableEnforceFocus?: boolean

If true, the modal will not prevent focus from leaving the modal while open.

Generally this should never be set to true as it makes the modal less accessible to assistive technologies, like screen readers.

Default

false

OptionaldisableEscapeKeyDown

disableEscapeKeyDown?: boolean

If true, hitting escape will not fire the onClose callback.

Default

false

OptionaldisableFocusHeading

disableFocusHeading?: boolean

If true, prevents the dialog from automatically focusing its first heading element.

OptionalenteringDirection

enteringDirection?: EnteringDirectionType

Specifies the direction from which the dialog enters the screen.

OptionalhideBackdrop

hideBackdrop?: boolean

If true, the backdrop is not rendered.

Default

false

Optionalid

id?: string

OptionalonClose

onClose?: ((event: {}, reason: "backdropClick" | "escapeKeyDown") => void)

Callback fired when the component requests to be closed.

Type declaration

    • (event, reason): void

    • Parameters

      • event: {}

        The event source of the callback.

        • reason: "backdropClick" | "escapeKeyDown"

          Can be: "escapeKeyDown", "backdropClick".

        Returns void

    open

    open: boolean

    If true, the component is shown.

    OptionalPaperProps

    PaperProps?: Partial<PaperProps<ElementType<any, keyof IntrinsicElements>>>

    Props applied to the Paper element.

    Default

    {}

    Optionalrole

    role?: AriaRole

    Optionalsx

    sx?: SxProps<Theme>

    The system prop that allows defining system overrides as well as additional CSS styles.

    OptionaltabIndex

    tabIndex?: number

    Optionaltitle

    title?: string

    OptionalTransitionProps

    TransitionProps?: TransitionProps

    Props applied to the transition element. By default, the element is based on this Transition component.

    Settings

    Member Visibility

    On This Page

    Properties