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

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2023, 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 KeyboardEvent, type MouseEvent, type ReactNode, type RefObject } from 'react';
export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
    /** Specify the content to be placed in the ModalBody. */
    children?: ReactNode;
    /**
     * Provide whether the modal content has a form element.
     * If `true` is used here, non-form child content should have `cds--modal-content__regular-content` class.
     */
    hasForm?: boolean;
    /**
     * Specify whether the modal contains scrolling content
     */
    hasScrollingContent?: boolean;
}
export declare const ModalBody: React.ForwardRefExoticComponent<ModalBodyProps & React.RefAttributes<HTMLDivElement>>;
export interface ComposedModalProps extends HTMLAttributes<HTMLDivElement> {
    /**
     * Specify the aria-label for cds--modal-container
     */
    'aria-label'?: string;
    /**
     * Specify the aria-labelledby for cds--modal-container
     */
    'aria-labelledby'?: string;
    /**
     * Specify the content to be placed in the ComposedModal
     */
    children?: ReactNode;
    /**
     * Specify an optional className to be applied to the modal root node
     */
    className?: string;
    /**
     * Specify an optional className to be applied to the modal node
     */
    containerClassName?: string;
    /**
     * Specify whether the primary button should be replaced with danger button.
     * Note that this prop is not applied if you render primary/danger button by yourself
     */
    danger?: boolean;
    /**
     * **Experimental**: Provide a `decorator` component to be rendered inside the `ComposedModal` component
     */
    decorator?: ReactNode;
    /**
     * Specify whether 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 an optional handler for closing modal.
     * Returning `false` here prevents closing modal.
     */
    onClose?(event: MouseEvent): void | boolean;
    /**
     * Called for all `onKeyDown` events that do not close the modal
     */
    onKeyDown?(evt: KeyboardEvent): void;
    /**
     * Specify whether the Modal is currently open
     */
    open?: boolean;
    preventCloseOnClickOutside?: boolean;
    /**
     * Specify a CSS selector that matches the DOM element that should be
     * focused when the Modal opens
     */
    selectorPrimaryFocus?: string;
    /** Specify the CSS selectors that match the floating menus. */
    selectorsFloatingMenus?: string[];
    size?: 'xs' | 'sm' | 'md' | 'lg';
    /**
     * @deprecated please use `decorator` instead.
     * **Experimental**: Provide a `Slug` component to be rendered inside the `ComposedModal` component
     */
    slug?: ReactNode;
}
declare const ComposedModal: React.ForwardRefExoticComponent<ComposedModalProps & React.RefAttributes<HTMLDivElement>>;
export default ComposedModal;