Interface ModalContentProps

interface ModalContentProps {
    actions?: any;
    aria-describedby?: string;
    aria-label?: string;
    aria-labelledby?: string;
    backdropId?: string;
    bodyAriaLabel?: string;
    bodyAriaRole?: string;
    boxId: string;
    children: ReactNode;
    className?: string;
    description?: ReactNode;
    descriptorId: string;
    disableFocusTrap?: boolean;
    elementToFocus?: string | HTMLElement | SVGElement;
    footer?: ReactNode;
    hasNoBodyWrapper?: boolean;
    header?: ReactNode;
    help?: ReactNode;
    isOpen?: boolean;
    labelId: string;
    maxWidth?: string | number;
    onClose?: ((event: KeyboardEvent | MouseEvent<Element, MouseEvent>) => void);
    ouiaId?: string | number;
    ouiaSafe?: boolean;
    position?: "default" | "top";
    positionOffset?: string;
    showClose?: boolean;
    title?: ReactNode;
    titleIconVariant?:
        | ComponentType<any>
        | "success"
        | "danger"
        | "warning"
        | "info"
        | "custom";
    titleLabel?: string;
    variant?:
        | "small"
        | "default"
        | "medium"
        | "large";
    width?: string | number;
}

Hierarchy (view full)

Properties

actions? aria-describedby? aria-label? aria-labelledby? backdropId? bodyAriaLabel? bodyAriaRole? boxId children className? description? descriptorId disableFocusTrap? elementToFocus? footer? hasNoBodyWrapper? header? help? isOpen? labelId maxWidth? onClose? ouiaId? ouiaSafe? position? positionOffset? showClose? title? titleIconVariant? titleLabel? variant? width?

Properties

Optionalactions

actions?: any

Action buttons to add to the standard modal footer. Ignored if the footer property is passed in.

Optionalaria-describedby

aria-describedby?: string

Id to use for the modal box descriptor.

Optionalaria-label

aria-label?: string

Accessible descriptor of the modal.

Optionalaria-labelledby

aria-labelledby?: string

Id to use for the modal box label.

OptionalbackdropId

backdropId?: string

Id of the backdrop.

OptionalbodyAriaLabel

bodyAriaLabel?: string

Accessible label applied to the modal box body. This should be used to communicate important information about the modal box body div element if needed, such as that it is scrollable.

OptionalbodyAriaRole

bodyAriaRole?: string

Accessible role applied to the modal box body. This will default to "region" if the bodyAriaLabel property is passed in. Set to a more appropriate role as applicable based on the modal content and context.

boxId

boxId: string

Id of the modal box container.

children

children: ReactNode

Content rendered inside the modal.

OptionalclassName

className?: string

Additional classes added to the modal box.

Optionaldescription

description?: ReactNode

Description of the modal.

descriptorId

descriptorId: string

Id of the modal box description.

OptionaldisableFocusTrap

disableFocusTrap?: boolean

Flag to disable focus trap.

OptionalelementToFocus

elementToFocus?: string | HTMLElement | SVGElement

The element to focus when the modal opens. By default the first focusable element will receive focus.

Optionalfooter

footer?: ReactNode

Custom footer.

OptionalhasNoBodyWrapper

hasNoBodyWrapper?: boolean

Flag indicating if modal content should be placed in a modal box body wrapper.

Optionalheader

header?: ReactNode

Complex header (more than just text), supersedes the title property for header content.

Optionalhelp

help?: ReactNode

Optional help section for the modal header.

OptionalisOpen

isOpen?: boolean

Flag to show the modal.

labelId

labelId: string

Id of the modal box title.

OptionalmaxWidth

maxWidth?: string | number

Maximum width of the modal.

OptionalonClose

onClose?: ((event: KeyboardEvent | MouseEvent<Element, MouseEvent>) => void)

A callback for when the close button is clicked.

OptionalouiaId

ouiaId?: string | number

Value to overwrite the randomly generated data-ouia-component-id.

OptionalouiaSafe

ouiaSafe?: boolean

Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

Optionalposition

position?: "default" | "top"

Position of the modal. By default a modal will be positioned vertically and horizontally centered.

OptionalpositionOffset

positionOffset?: string

Offset from alternate position. Can be any valid CSS length/percentage.

OptionalshowClose

showClose?: boolean

Flag to show the close button in the header area of the modal.

Optionaltitle

title?: ReactNode

Text content of the modal header.

OptionaltitleIconVariant

titleIconVariant?:
    | ComponentType<any>
    | "success"
    | "danger"
    | "warning"
    | "info"
    | "custom"

Optional alert icon (or other) to show before the title of the modal header. When the predefined alert types are used the default styling will be automatically applied.

OptionaltitleLabel

titleLabel?: string

Optional title label text for screen readers.

Optionalvariant

variant?:
    | "small"
    | "default"
    | "medium"
    | "large"

Variant of the modal.

Optionalwidth

width?: string | number

Default width of the modal.

Settings

Member Visibility

On This Page

Properties