@carbon/react/es/components/Modal/Modal.d.ts

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
import React, { type HTMLAttributes, type ReactNode, type RefObject } from 'react';
import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
export declare const ModalSizes: readonly ["xs", "sm", "md", "lg"];
export type ModalSize = (typeof ModalSizes)[number];
export interface ModalSecondaryButton {
    buttonText?: string | ReactNode;
    onClick?: React.MouseEventHandler<HTMLButtonElement>;
}
export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
    /**
     * Specify whether the Modal is displaying an alert, error or warning
     * Should go hand in hand with the danger prop.
     */
    alert?: boolean;
    /**
     * Required props for the accessibility label of the header
     */
    'aria-label'?: string;
    /**
     * Provide the contents of your Modal
     */
    children?: ReactNode;
    /**
     * Specify an optional className to be applied to the modal root node
     */
    className?: string;
    /**
     * Specify label for the close button of the modal; defaults to close
     */
    closeButtonLabel?: string;
    /**
     * Specify whether the Modal is for dangerous actions
     */
    danger?: boolean;
    /**
     * **Experimental**: Provide a decorator component to be rendered inside the `Modal` component
     */
    decorator?: ReactNode;
    /**
     * Specify whether the modal contains scrolling content
     */
    hasScrollingContent?: boolean;
    /**
     * Specify the DOM element ID of the top-level node.
     */
    id?: string;
    /**
     * Specify whether or not the Modal content should have any inner padding.
     */
    isFullWidth?: boolean;
    /**
     * Provide a ref to return focus to once the modal is closed.
     */
    launcherButtonRef?: RefObject<HTMLButtonElement | null>;
    /**
     * Specify the description for the loading text
     */
    loadingDescription?: string;
    /**
     * Specify the description for the loading text
     */
    loadingIconDescription?: string;
    /**
     * Specify loading status
     */
    loadingStatus?: InlineLoadingStatus;
    /**
     * Specify a label to be read by screen readers on the modal root node
     */
    modalAriaLabel?: string;
    /**
     * Specify the content of the modal header title.
     */
    modalHeading?: ReactNode;
    /**
     * Specify the content of the modal header label.
     */
    modalLabel?: ReactNode;
    /**
     * Specify a handler for keypresses.
     * @deprecated this property is unused
     */
    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
    /**
     * Specify an optional handler to be invoked when loading is
     * successful
     */
    onLoadingSuccess?: () => void;
    /**
     * Specify a handler for closing modal.
     * The handler should care of closing modal, e.g. changing `open` prop.
     */
    onRequestClose?: React.ReactEventHandler<HTMLElement>;
    /**
     * Specify a handler for "submitting" modal.
     * The handler should care of closing modal, e.g. changing `open` prop, if necessary.
     */
    onRequestSubmit?: React.ReactEventHandler<HTMLElement>;
    /**
     * Specify a handler for the secondary button.
     * Useful if separate handler from `onRequestClose` is desirable
     */
    onSecondarySubmit?: React.ReactEventHandler<HTMLElement>;
    /**
     * Specify whether the Modal is currently open
     */
    open?: boolean;
    /**
     * Specify whether the modal should be button-less
     */
    passiveModal?: boolean;
    /**
     * Prevent closing on click outside of modal
     */
    preventCloseOnClickOutside?: boolean;
    /**
     * Specify whether the Button should be disabled, or not
     */
    primaryButtonDisabled?: boolean;
    /**
     * Specify the text for the primary button
     */
    primaryButtonText?: ReactNode;
    /**
     * Specify the text for the secondary button
     */
    secondaryButtonText?: ReactNode;
    /**
     * Specify an array of config objects for secondary buttons
     */
    secondaryButtons?: ModalSecondaryButton[];
    /**
     * Specify a CSS selector that matches the DOM element that should
     * be focused when the Modal opens
     */
    selectorPrimaryFocus?: string;
    /**
     * Specify CSS selectors that match DOM elements working as floating menus.
     * Focusing on those elements won't trigger "focus-wrap" behavior
     */
    selectorsFloatingMenus?: string[];
    /**
     * Specify if Enter key should be used as "submit" action
     */
    shouldSubmitOnEnter?: boolean;
    /**
     * Specify the size variant.
     */
    size?: ModalSize;
    /**
     * @deprecated please use decorator instead.
     * **Experimental**: Provide a `Slug` component to be rendered inside the `Modal` component
     */
    slug?: ReactNode;
}
declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
export default Modal;