Modal

Demos

How to import

import { Modal } from '@fibrous/semi-ui-solid';

Basic Usage

Use visible to control visibility. onOk and onCancel never close the modal by themselves; the caller sets visible to false. When either returns a Promise, the matching button stays loading until the Promise settles.

Code

import { createSignal } from 'solid-js';
import { Button, Modal } from '@fibrous/semi-ui-solid';

export default function ModalDemo() {
    const [visible, setVisible] = createSignal(false);
    const showDialog = () => {
        setVisible(true);
    };
    const handleOk = () => {
        setVisible(false);
        console.log('Ok button clicked');
    };
    const handleCancel = () => {
        setVisible(false);
        console.log('Cancel button clicked');
    };
    const handleAfterClose = () => {
        console.log('After Close callback executed');
    };

    return (
        <>
            <Button onClick={showDialog}>打开弹窗</Button>
            <Modal title="基本对话框" visible={visible()} onOk={handleOk} afterClose={handleAfterClose} onCancel={handleCancel} closeOnEsc>
                This is the content of a basic modal.
                <br />
                More content...
            </Modal>
        </>
    );
}

Bottom Button Fill up

Set footerFill to true to make the bottom buttons of the Modal footer fill up the arrangement.

Code

import { createSignal } from 'solid-js';
import { Button, Modal } from '@fibrous/semi-ui-solid';

export default function ModalDemo() {
    const [visible, setVisible] = createSignal(false);
    const showDialog = () => {
        setVisible(true);
    };
    const handleOk = () => {
        setVisible(false);
        console.log('Ok button clicked');
    };
    const handleCancel = () => {
        setVisible(false);
        console.log('Cancel button clicked');
    };
    const handleAfterClose = () => {
        console.log('After Close callback executed');
    };

    return (
        <>
            <Button onClick={showDialog}>打开弹窗</Button>
            <Modal title="基本对话框" visible={visible()} onOk={handleOk} afterClose={handleAfterClose} onCancel={handleCancel} closeOnEsc footerFill>
                This is the content of a basic modal.
                <br />
                More content...
            </Modal>
        </>
    );
}

Mask Closable

You can set maskClosable={false} to prevent modal from closing when clicking on the mask.

Code

import { createSignal } from 'solid-js';
import { Button, Modal } from '@fibrous/semi-ui-solid';

export default function ModalDemo() {
    const [visible, setVisible] = createSignal(false);
    const showDialog = () => {
        setVisible(true);
    };
    const handleOk = () => {
        setVisible(false);
    };
    const handleCancel = () => {
        setVisible(false);
    };
    return (
        <>
            <Button onClick={showDialog}>点击遮罩层不可关闭</Button>
            <Modal title="对话框标题" visible={visible()} onOk={handleOk} onCancel={handleCancel} maskClosable={false}>
                <p>This is a modal that cannot be closed by clicking on the mask.</p>
                <p>More content...</p>
            </Modal>
        </>
    );
}

Custom Button Text

You can set button text using okText and cancelText.

A modal created with static methods is rendered outside the component tree. It reads only the global defaults and the default locale, not the locale from ConfigProvider or LocaleProvider. Set the texts with these two properties, or use Modal.useModal.

Code

import { createSignal } from 'solid-js';
import { Button, Modal } from '@fibrous/semi-ui-solid';

export default function ModalDemo() {
    const [visible, setVisible] = createSignal(false);
    const showDialog = () => {
        setVisible(true);
    };
    const handleOk = () => {
        setVisible(false);
    };
    const handleCancel = () => {
        setVisible(false);
    };
    return (
        <>
            <Button onClick={showDialog}>自定义按钮文字</Button>
            <Modal title="自定义按钮文字" visible={visible()} onOk={handleOk} onCancel={handleCancel} okText="Sounds great!" cancelText="No, thanks.">
                <p>This is a modal with customized button texts.</p>
                <p>More content...</p>
            </Modal>
        </>
    );
}

Custom Button Properties

You can set button properties using okButtonProps and cancelButtonProps. Their onClick runs before the built-in handling and does not replace it.

Code

import { createSignal } from 'solid-js';
import { Button, Modal } from '@fibrous/semi-ui-solid';

export default function ModalDemo() {
    const [visible, setVisible] = createSignal(false);
    const showDialog = () => {
        setVisible(true);
    };
    const handleOk = () => {
        setVisible(false);
    };
    const handleCancel = () => {
        setVisible(false);
    };
    return (
        <>
            <Button onClick={showDialog}>自定义按钮属性</Button>
            <Modal title="自定义按钮属性" visible={visible()} onOk={handleOk} onCancel={handleCancel} okButtonProps={{ size: 'small', type: 'warning' }} cancelButtonProps={{ size: 'small', disabled: true }}>
                <p>This is a modal with customized button props.</p>
                <p>More content...</p>
            </Modal>
        </>
    );
}

Custom Header & Footer

For more customized modal, you could use header and footer. Set header={null} if you do not want header area, or footer={null} to remove footer area including buttons.

Code

import { createSignal } from 'solid-js';
import { Button, Modal } from '@fibrous/semi-ui-solid';

export default function ModalDemo() {
    const [visible, setVisible] = createSignal(false);
    const showDialog = () => {
        setVisible(true);
    };
    const handleOk = () => {
        setVisible(false);
    };
    const handleCancel = () => {
        setVisible(false);
    };
    return (
        <>
            <Button onClick={showDialog}>自定义页脚样式</Button>
            <Modal
                title="自定义页脚"
                visible={visible()}
                onOk={handleOk}
                onCancel={handleCancel}
                footer={
                    <Button type="primary" onClick={handleOk}>
                        Yes, I Understand
                    </Button>
                }
            >
                <p>This is a modal with a customized footer.</p>
                <p>More content...</p>
            </Modal>
        </>
    );
}

Custom Style

You can use style to customize styling or position e.g. style.top = '30vh', or use centered to center modal. Also, you could use maskStyle to customize mask style or bodyStyle for content style.

Code

import { createSignal } from 'solid-js';
import { Button, Modal } from '@fibrous/semi-ui-solid';

export default function ModalDemo() {
    const [visible, setVisible] = createSignal(false);
    const showDialog = () => {
        setVisible(true);
    };
    const handleOk = () => {
        setVisible(false);
    };
    const handleCancel = () => {
        setVisible(false);
    };
    return (
        <>
            <Button onClick={showDialog}>自定义对话框样式</Button>
            <Modal title="自定义样式" visible={visible()} onOk={handleOk} onCancel={handleCancel} centered bodyStyle={{ overflow: 'auto', height: '200px' }}>
                <p style={{ 'line-height': '1.8' }}>Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</p>
                <p style={{ 'line-height': '1.8' }}>区别于其他的设计系统而言，Semi Design 以用户中心、内容优先、设计人性化为设计理念，具有以下优势：</p>
                <ul>
                    <li>
                        <p>Semi Design 以内容优先进行设计。</p>
                    </li>
                    <li>
                        <p>更容易地自定义主题。</p>
                    </li>
                    <li>
                        <p>适用国际化场景。</p>
                    </li>
                    <li>
                        <p>效率场景加入人性化关怀</p>
                    </li>
                </ul>
            </Modal>
        </>
    );
}

By using header, footer, etc, you could create any modal to your needs.

Code

import { createSignal } from 'solid-js';
import { IconSemiLogo, IconVigoLogo } from '@fibrous/semi-icons-solid';
import { Button, List, Modal } from '@fibrous/semi-ui-solid';

const data = [
    {
        icon: IconSemiLogo,
        title: 'Boost new feature adoption with Integration',
        content: 'Sample data is prepared for you to demonstrate how Integration may be useful for your team',
    },
    {
        icon: IconVigoLogo,
        title: 'Introducing Dark Mode',
        content: 'Sample data is prepared for you to demonstrate how Integration may be useful for your team',
    },
    {
        icon: IconSemiLogo,
        title: 'New List Component',
        content: 'Sample data is prepared for you to demonstrate how Integration may be useful for your team',
    },
];

const btnStyle = {
    width: '240px',
    margin: '4px 50px',
};

export default function ModalDemo() {
    const [visible, setVisible] = createSignal(false);
    const showDialog = () => {
        setVisible(true);
    };
    const handleOk = () => {
        setVisible(false);
    };
    const handleCancel = () => {
        setVisible(false);
    };
    return (
        <>
            <Button onClick={showDialog}>自定义对话框</Button>
            <Modal
                header={null}
                visible={visible()}
                onOk={handleOk}
                onCancel={handleCancel}
                footer={
                    <div style={{ 'text-align': 'center' }}>
                        <Button type="primary" theme="solid" onClick={handleOk} style={btnStyle}>
                            Continue
                        </Button>
                        <Button type="primary" theme="borderless" onClick={handleCancel} style={btnStyle}>
                            Learn more features
                        </Button>
                    </div>
                }
            >
                <h3 style={{ 'text-align': 'center', 'font-size': '24px', margin: '40px' }}>Semi Design New Features</h3>
                <List
                    dataSource={data}
                    split={false}
                    renderItem={(item) => (
                        <List.Item
                            header={<item.icon style={{ 'font-size': '48px' }} />}
                            main={
                                <div>
                                    <h6 style={{ margin: 0, 'font-size': '16px' }}>{item.title}</h6>
                                    <p style={{ 'margin-top': '4px', color: 'var(--semi-color-text-1)' }}>{item.content}</p>
                                </div>
                            }
                        />
                    )}
                />
            </Modal>
        </>
    );
}

Set fullScreen to use full screen Modal

Code

import { createSignal } from 'solid-js';
import { Button, Modal } from '@fibrous/semi-ui-solid';

export default function ModalDemo() {
    const [visible, setVisible] = createSignal(false);
    const onClose = () => {
        setVisible(false);
    };
    return (
        <>
            <Button onClick={() => setVisible(true)}>打开全屏弹窗</Button>
            <Modal title="全屏对话框标题" fullScreen visible={visible()} onOk={onClose} onCancel={onClose}>
                <p>This is a full screen modal</p>
                <p>More content...</p>
            </Modal>
        </>
    );
}

You could use static methods to create a confirm Modal. Use icon to customize icon; it takes a JSX element, and null removes the icon. Any other prop the Modal supports can be passed too.

Code

import { IconSend } from '@fibrous/semi-icons-solid';
import { Button, Modal } from '@fibrous/semi-ui-solid';

function success() {
    Modal.success({ title: 'This is a success message', content: 'bla bla bla...' });
}

function info() {
    Modal.info({ title: 'Here is some info', content: 'bla bla bla...' });
}

function error() {
    Modal.error({ title: 'Unfortunately, there is an error', content: 'bla bla bla...' });
}

function warning() {
    Modal.warning({ title: 'Warning: be cautious ahead', content: 'bla bla bla...' });
}

function confirm() {
    Modal.confirm({ title: 'Are you sure ?', content: 'bla bla bla...' });
}

function custom() {
    Modal.info({
        title: 'This is a custom modal',
        content: 'bla bla bla...',
        icon: <IconSend />,
        cancelButtonProps: { theme: 'borderless' },
        okButtonProps: { theme: 'solid' },
    });
}

export default function ModalDemo() {
    return (
        <div>
            <Button onClick={info}>Info</Button>
            <br />
            <br />
            <Button onClick={success}>Success</Button>
            <br />
            <br />
            <Button onClick={error} type="danger">
                Error
            </Button>
            <br />
            <br />
            <Button onClick={warning} type="warning">
                Warning
            </Button>
            <br />
            <br />
            <Button onClick={confirm} type="primary">
                Confirm
            </Button>
            <br />
            <br />
            <Button onClick={custom}>Custom</Button>
        </div>
    );
}

useModal Hooks

Modal.useModal() returns [modal, contextHolder]. Place contextHolder where the context should be read, and the modals created with modal.confirm and the other methods can access the context, ConfigProvider and locale at that position.

Code

import en_GB from '@fibrous/semi-foundation/locale/source/en_GB';
import { Button, ConfigProvider, Modal } from '@fibrous/semi-ui-solid';

const config = { title: 'This is a success message', content: 'Context consumer' };

export default function ModalDemo() {
    const [modal, contextHolder] = Modal.useModal();

    return (
        <ConfigProvider locale={en_GB}>
            <div>
                <Button
                    onClick={() => {
                        modal.confirm(config);
                    }}
                >
                    Confirm Modal
                </Button>
            </div>
            {contextHolder}
        </ConfigProvider>
    );
}

The modal content is rendered customly through modalRender. Its argument is the role="dialog" element, which the returned result must contain. The draggable Modal is implemented through the DragMove component.

Code

import { createSignal } from 'solid-js';
import { Button, DragMove, Modal } from '@fibrous/semi-ui-solid';

export default function ModalDemo() {
    const [visible, setVisible] = createSignal(false);
    return (
        <div>
            <Button onClick={() => setVisible(true)}>Open Modal</Button>
            <Modal title="可拖拽Modal" visible={visible()} centered onCancel={() => setVisible(false)} modalRender={(modal) => <DragMove positionStrategy="relative">{modal}</DragMove>}>
                <p>This is the content of a basic sidesheet.</p>
                <p>Here is more content...</p>
            </Modal>
        </div>
    );
}

API Reference

Props

Property	Description	Type	Default
afterClose	Called after the dialog has fully closed. It is also called once when the dialog is unmounted while shown.	`Type`	-
bodyStyle	Style of the dialog body, an object or a string.	`JSX.CSSProperties \| string`	-
cancelButtonProps	Props of the cancel button. It is focused on open by default; autoFocus set to false stops that. class and style land on the button; onClick runs before the built-in cancel handling, which still runs.	`ModalButtonProps`	-
cancelLoading	Whether the cancel button is loading. When omitted it follows the Promise returned by onCancel; pass false to turn that off.	`boolean`	-
cancelText	Cancel button text. Defaults to the locale entry Modal.cancel.	`string`	-
centered	Whether the dialog is vertically centered.	`boolean`	`false`
children	Body of the dialog.	`JSX.Element`	-
class	Class name of the outermost element inside the portal.	`string`	-
closable	Whether the close button in the corner is shown.	`boolean`	`true`
closeIcon	Icon inside the close button. The default icon is used when omitted.	`JSX.Element`	-
closeOnEsc	Whether Esc cancels the dialog.	`boolean`	`true`
confirmLoading	Whether the ok button is loading. When omitted it follows the Promise returned by onOk; pass false to turn that off.	`boolean`	-
content	The Modal component does not render it; write the dialog content as children. It is used only by the options of the imperative methods such as `Modal.info`.	`JSX.Element`	-
direction	Text direction, overriding the ConfigProvider. The imperative methods render outside any ConfigProvider, so pass it yourself; the methods of `Modal.useModal` follow the ConfigProvider at the holder by default.	`'ltr' \| 'rtl'`	-
footer	Replaces the default footer buttons. `null` hides the footer area.	`JSX.Element`	-
footerFill	Whether the two buttons of the default footer fill the row.	`boolean`	-
fullScreen	Whether the dialog fills the screen. width and height are ignored.	`boolean`	`false`
getPopupContainer	Parent element the dialog is rendered into. A custom container needs position: relative; this changes where the dialog sits in the DOM, not where it is shown.	`Type`	-
hasCancel	Whether the default footer shows the cancel button.	`boolean`	`true`
header	Replaces the whole default header (icon, title and close button). `null` hides the header area.	`JSX.Element`	-
height	Height of the dialog. A number is in pixels; a string is any valid CSS length.	`string \| number`	-
icon	Icon before the title.	`JSX.Element`	-
keepDOM	Whether the dialog content stays mounted while closed.	`boolean`	`false`
lazyRender	Used with keepDOM. When true, the dialog is not rendered until it is first shown.	`boolean`	`true`
mask	Whether the mask is shown.	`boolean`	`true`
maskClosable	Whether a click on the mask cancels the dialog.	`boolean`	`true`
maskFixed	Whether a mask confined to a custom container still covers the viewport with fixed positioning and is treated as modal (aria-modal, inert page, Tab lock, body scroll lock).	`boolean`	`false`
maskStyle	Style of the mask, an object or a string.	`JSX.CSSProperties \| string`	-
modalContentClass	Class name of the dialog content element.	`string`	-
modalRender	Custom rendering of the dialog itself. The argument is the `role="dialog"` element, which the returned result must contain, for example wrapped in DragMove.	`Type`	-
motion	Whether the enter and leave animations run.	`boolean`	`true`
okButtonProps	Props of the ok button. autoFocus focuses it on open; class and style land on the button; onClick runs before the built-in ok handling, which still runs.	`ModalButtonProps`	-
okText	Ok button text. Defaults to the locale entry Modal.confirm.	`string`	-
okType	Type of the ok button.	`OKType`	`"primary"`
onCancel	Called by the cancel button, the close button, the mask and Esc; the argument is a native KeyboardEvent for Esc. A returned Promise keeps the cancel button loading until it settles. The dialog never closes itself; the caller sets visible to false.	`Type`	-
onOk	Called when the ok button is clicked. A returned Promise keeps the ok button loading until it settles. The dialog never closes itself; the caller sets visible to false.	`Type`	-
preventScroll	Whether the focus calls made by the component avoid scrolling the focused element into view. Focus calls made by the caller are not affected.	`boolean`	-
ref	Receives the outermost element inside the portal.	`Type`	-
role	Role of the dialog element. The imperative methods use `alertdialog`.	`'dialog' \| 'alertdialog'`	-
size	Width preset of the dialog: small is 448px, medium 684px, large 920px, full-width 100vw - 64px.	`Size`	`"small"`
style	Style of the `.semi-modal` dialog box, an object or a string.	`JSX.CSSProperties \| string`	-
title	Title, which also names the dialog.	`JSX.Element`	-
visible	Whether the dialog is visible, controlled by the caller.	`boolean`	`false`
width	Width of the dialog. A number is in pixels; a string is any valid CSS length. When omitted, size decides.	`string \| number`	-
zIndex	z-index of the outer layer.	`number`	`1000`

role and every aria-* attribute land on the role="dialog" element, style lands on the .semi-modal dialog box, and ref, class and other native attributes and events land on the outermost element inside the portal. The Modal component does not render content; put the dialog content in children. The content option is only for the static methods below.

Static Method

Modal.info
Modal.success
Modal.error
Modal.warning
Modal.confirm

The options are the props of the Modal component (ModalProps); title, content, icon, closeIcon, header and footer take JSX elements. Unlike the component, a Promise returned by onOk or onCancel closes the modal after it fulfills, and a rejection keeps it open; any other return value closes it at once.

aria-* options land on the dialog. Creating modal with the above methods will return a reference to the instance. You could use it to update or close the modal. update takes the same options as the methods above (ModalProps) and merges them into the current config; it does not take type.

const modal = Modal.info({ title: 'Title' });

modal.update({
    title: 'Updated Title',
    content: 'Updated Content',
});

modal.destroy();

Modal.destroyAll

You could use Modal.destroyAll() to destroy Modal that created by methods above e.g. .info()

Modal.useModal
When you need to read context, call const [modal, contextHolder] = Modal.useModal() and place contextHolder once at the corresponding position. Modals created through modal can access everything at the position of contextHolder (context, ConfigProvider, locale). The modal object shares the same methods with Modal.method.

Accessibility

ARIA

WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/

The Modal component has role dialog, following the APG Dialog (Modal) pattern
Confirm dialogs (Modal.confirm, info, success, warning, error, and the same-named useModal methods) have role alertdialog, and aria-describedby points to the message, following the APG Alert Dialog pattern
aria-modal is set to true when the dialog is modal. A dialog is modal when it has a mask (mask) and is mounted in the body (judged by the actual container, so the getPopupContainer of ConfigProvider counts) or has maskFixed. With mask={false}, or a mask confined to a custom container, the page behind stays usable and aria-modal is omitted
aria-labelledby corresponds to the dialog title; it is not generated when aria-label or a custom header is given
The Modal component does not set aria-describedby by default: when the body holds a form, a list or several paragraphs, reading it out whole gets in the way. Pass it yourself when needed
role and every aria-* attribute passed by the caller land on the element that carries the role
The close button's aria-label comes from the current locale ('Close' in English, '关闭' in Simplified Chinese)

Keyboard and focus

Modal automatically gets the focus when it is popped up. An element with autoFocus (autofocus in Vue) inside the dialog gets the focus first; otherwise the cancel button does by default, which can be controlled by passing autoFocus in cancelButtonProps or okButtonProps. With keepDOM, opening it again gives the same result; with keepDOM and lazyRender={false} that starts hidden, an autoFocus element cannot take focus under display: none, so later openings land on the default button.
When a modal dialog is closed, the focus automatically returns to the element before it was opened. Keyboard users can use the Tab key and Shift + Tab to move the focus in a loop within the Modal, including the Modal's own close button and OK cancel button. At this time, the page behind the Modal cannot be interacted with or tab-focused.
A non-modal dialog (mask={false}, or a mask confined to a custom container without maskFixed) also takes focus when opened, but does not lock Tab and the rest of the page stays usable. When closed, focus is returned only if it is still inside the dialog or has fallen to the body; focus the user has moved elsewhere on the page stays. A Modal in the body with mask={false} does not lock body scrolling.
Modify the default value of closeOnEsc to true, allowing users to directly close Modal through the keyboard for a better experience

Content Guidelines

Imperative Modal and Default Modal The title of the two modal dialogs uses the format of verb + noun, whether it is a declarative sentence or a question sentence

✅ Recommended usage	❌ Deprecated usage
Edit ticket	Edit
Delete form？	Are you sure you want to delete form?

The operation buttons of the two modal dialog boxes only need to use the verbs in the title under the premise of ensuring that the title description is clear

✅ Recommended usage	❌ Deprecated usage
Edit	Edit ticket

Text specification for imperative Modal
- Give a specific explanation to the title, do not repeat the information of the title
- Make sure users know how to act if necessary

Design Tokens

These are the component's internal Sass variables and cannot be overridden. To customize styles, override the --semi-* CSS variables (see the Design Token page) or write unlayered CSS rules.

Sass variable	Value	Usage
$animation_duration-modal-show	120ms	弹窗打开-动画持续时间
$animation_function-modal-show	cubic-bezier(0.215, 0.61, 0.355, 1)	弹窗打开-过渡曲线
$animation_delay-modal-show	0ms	弹窗打开-延迟时间
$animation_duration-modal-hide	120ms	弹窗关闭-动画持续时间
$animation_function-modal-hide	cubic-bezier(0.215, 0.61, 0.355, 1)	弹窗关闭-过渡曲线
$animation_delay-modal-hide	0ms	弹窗关闭-延迟时间
$animation_duration-modal_mask-show	90ms	弹窗打开时-蒙层颜色-动画持续时间
$animation_function-modal_mask-show	cubic-bezier(0.215, 0.61, 0.355, 1)	弹窗打开时-蒙层颜色-过渡曲线
$animation_delay-modal_mask-show	0ms	弹窗打开时-蒙层颜色-延迟时间
$animation_duration-modal_mask-hide	90ms	弹窗关闭时-蒙层颜色-动画持续时间
$animation_function-modal_mask-hide	cubic-bezier(0.215, 0.61, 0.355, 1)	弹窗关闭时-蒙层颜色-过渡曲线
$animation_delay-modal_mask-hide	0ms	弹窗关闭时-蒙层颜色-延迟时间
$animation_transform_scale-modal_content-open	0.7	弹窗打开时-缩放比例
$animation_opacity-modal_content-open	0	弹窗打开时-起始透明度
$animation_transform_scale-modal_content-close	0.7	弹窗关闭时-缩放比例
$animation_opacity-modal_content-close	0	弹窗关闭时-起始透明度
$animation_opacity-modal_mask-open	0	弹窗打开时-蒙层起始透明度
$animation_opacity-modal_mask-close	0	弹窗关闭时-蒙层起始透明度
$color-modal-bg	var(--semi-color-bg-2)	模态框背景颜色
$color-modal_mask-bg	var(--semi-color-overlay-bg)	模态框蒙层颜色
$color-modal_main-text	var(--semi-color-text-0)	模态框文字颜色
$color-modal_info-icon	var(--semi-color-info)	模态框信息图标颜色
$color-modal_primary-icon	var(--semi-color-primary)	模态框主要图标颜色
$color-modal_success-icon	var(--semi-color-success)	模态框成功图标颜色
$color-modal_danger-icon	var(--semi-color-danger)	模态框危险图标颜色
$color-modal_warning-icon	var(--semi-color-warning)	模态框警告图标颜色
$color-modal_content-border	var(--semi-color-border)	模态框描边颜色
$color-modal_header-bg	transparent	模态框 header 背景填充色
$color-modal_footer-bg	transparent	模态框 footer 背景填充色
$spacing-modal-marginY	80px	模态框距容器顶部外边距
$spacing-modal-marginX	auto	模态框水平外边距（默认居中）
$spacing-modal_mask-top	0	模态框蒙层顶部位置
$spacing-modal_mask-right	0	模态框蒙层右侧位置
$spacing-modal_mask-bottom	0	模态框蒙层底部位置
$spacing-modal_mask-left	0	模态框蒙层左侧位置
$spacing-modal_content_withicon-marginLeft	36px	模态框蒙层左侧位置
$spacing-modal_icon_wrapper-marginRight	$spacing-base-tight	模态框图标右侧外边距
$spacing-modal_wrap-top	0
$spacing-modal_wrap-right	0
$spacing-modal_wrap-bottom	0
$spacing-modal_wrap-left	0
$spacing-modal_title-margin	0	模态框标题外边距
$spacing-modal_content-paddingY	0	模态框内容垂直内边距
$spacing-modal_content-paddingX	24px	模态框内容水平内边距
$spacing-modal_header-marginY	24px	模态框标题垂直外边距
$spacing-modal_header-marginX	0	模态框标题水平外边距
$spacing-modal_header-paddingY	0
$spacing-modal_header-paddingX	0
$spacing-modal_body_wrapper-marginY	24px
$spacing-modal_body_wrapper-marginX	0
$spacing-modal_body-margin	0	模态框 body 外边距
$spacing-modal_body-padding	0	模态框内容外Padding
$spacing-modal_footer-marginY	24px	模态框 footer 垂直外边距
$spacing-modal_footer-marginX	0	模态框 footer 水平外边距
$spacing-modal_footer-paddingY	0
$spacing-modal_footer-paddingX	0
$spacing-modal_footer_button-marginLeft	$spacing-base-tight	模态框 footer 按钮左侧外边距
$spacing-modal_confirm_header-marginBottom	8px	命令式调用模态框 header 底部外边距
$spacing-modal_confirm_icon_wrapper-marginRight	$spacing-base-tight	命令式调用模态框图标右侧外边距
$spacing-modal_content_fullscreen-top	0px	模态框内容全屏顶部位置
$width-modal_title	100%	模态框标题宽度
$width-modal_content	100%	模态框内容宽度
$height-modal_content	max-content	模态框内容高度
$width-modal_content-border	1px	模态框内容描边宽度
$width-modal_small	448px	模态框宽度 - 小
$width-modal_medium	684px	模态框宽度 - 中
$width-modal_large	920px	模态框宽度 - 大
$width-modal_full_width	calc(100vw - 64px)	模态框宽度 - 全屏
$radius-modal_content	var(--semi-border-radius-large)	模态框圆角大小
$radius-modal_content_fullscreen	0	模态框圆角大小 - 全屏
$radius-modal_footer	0 0 5px 5px	模态框 footer 圆角大小
$font-modal_header-fontSize	$font-size-regular	模态框 title 字号
$font-modal_header-fontWeight	$font-weight-bold	模态框 title 字重
$color-modal_header-border	transparent	模态框 header 底部描边颜色
$width-modal_header-border	0	模态框 header 底部描边宽度
$color-modal_footer-border	transparent	模态框 footer 顶部描边颜色
$width-modal_footer-border	0	模态框 footer 顶部描边宽度
$shadow-modal_content	var(--semi-shadow-elevated)
$filter-modal_mask-bg	none
$filter-modal_content-bg	none

FAQ

Why the button texts in Modal.confirm are not internationalized even when I use LocaleProvider?

A static Modal is rendered outside the component tree and reads only the global defaults and the default locale, so it cannot read the config from ConfigProvider or LocaleProvider. You could use Modal.useModal() and place the returned contextHolder where the config should be read, or use okText and cancelText to set the texts yourself.
Why is the spacing between title and content different under imperative and non-imperative calls?

In the imperative call scenario, the title and content are more closely related, so expressing this strong correlation with a closer distance is in line with expectations. If users don't want this effect, they can do their own style overrides.

Demos

How to import

Basic Usage

Bottom Button Fill up

Mask Closable

Custom Button Text

Custom Button Properties

Custom Header & Footer

Custom Style

Custom Modal

Full Screen Modal

Confirm Modal

useModal Hooks

Draggable Modal

API Reference

Static Method

Accessibility

ARIA

Keyboard and focus

Content Guidelines

Design Tokens

FAQ

Why the button texts in Modal.confirm are not internationalized even when I use LocaleProvider?

Why is the spacing between title and content different under imperative and non-imperative calls?