Modal

Demos

How to import

<script lang="ts">
    import { Modal } from '@fibrae/semi-ui-svelte';
</script>

Basic Usage

Use bind:visible to control visibility. bind:visible is written back with false only on the cancel paths: the cancel button, the close button, the mask and Esc. When onCancel returns a Promise, it is written back after the Promise fulfills, and a rejection keeps the modal open. Clicking ok only calls onOk; the caller sets visible to false. While onCancel runs, visible is still true.

Code

<script lang="ts">
    import { Button, Modal } from '@fibrae/semi-ui-svelte';

    let visible = $state(false);
    const handleOk = () => {
        visible = false;
        console.log('Ok button clicked');
    };
    const handleCancel = () => {
        console.log('Cancel button clicked');
    };
    const handleAfterClose = () => {
        console.log('After Close callback executed');
    };
</script>

<Button onclick={() => (visible = true)}>打开弹窗</Button>
<Modal afterClose={handleAfterClose} bind:visible closeOnEsc onCancel={handleCancel} onOk={handleOk} title="基本对话框">
    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

<script lang="ts">
    import { Button, Modal } from '@fibrae/semi-ui-svelte';

    let visible = $state(false);
    const handleOk = () => {
        visible = false;
        console.log('Ok button clicked');
    };
    const handleCancel = () => {
        console.log('Cancel button clicked');
    };
    const handleAfterClose = () => {
        console.log('After Close callback executed');
    };
</script>

<Button onclick={() => (visible = true)}>打开弹窗</Button>
<Modal afterClose={handleAfterClose} bind:visible closeOnEsc footerFill onCancel={handleCancel} onOk={handleOk} title="基本对话框">
    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

<script lang="ts">
    import { Button, Modal } from '@fibrae/semi-ui-svelte';

    let visible = $state(false);
    const close = () => {
        visible = false;
    };
</script>

<Button onclick={() => (visible = true)}>点击遮罩层不可关闭</Button>
<Modal bind:visible maskClosable={false} onOk={close} title="对话框标题">
    <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, so it cannot read the locale from ConfigProvider or LocaleProvider. Set the texts with these two properties, or use Modal.useModal.

Code

<script lang="ts">
    import { Button, Modal } from '@fibrae/semi-ui-svelte';

    let visible = $state(false);
    const close = () => {
        visible = false;
    };
</script>

<Button onclick={() => (visible = true)}>自定义按钮文字</Button>
<Modal bind:visible cancelText="No, thanks." okText="Sounds great!" onOk={close} title="自定义按钮文字">
    <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

<script lang="ts">
    import { Button, Modal } from '@fibrae/semi-ui-svelte';

    let visible = $state(false);
    const close = () => {
        visible = false;
    };
</script>

<Button onclick={() => (visible = true)}>自定义按钮属性</Button>
<Modal bind:visible cancelButtonProps={{ size: 'small', disabled: true }} okButtonProps={{ size: 'small', type: 'warning' }} onOk={close} title="自定义按钮属性">
    <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 the header and footer snippets. An empty header snippet ({#snippet header()}{/snippet}) or header={null} removes the header area; likewise an empty footer snippet or footer={null} removes the footer area including buttons.

Code

<script lang="ts">
    import { Button, Modal } from '@fibrae/semi-ui-svelte';

    let visible = $state(false);
</script>

<Button onclick={() => (visible = true)}>自定义页脚样式</Button>
<Modal bind:visible title="自定义页脚">
    <p>This is a modal with a customized footer.</p>
    <p>More content...</p>
    {#snippet footer()}
        <Button type="primary" onclick={() => (visible = false)}>Yes, I Understand</Button>
    {/snippet}
</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

<script lang="ts">
    import { Button, Modal } from '@fibrae/semi-ui-svelte';

    let visible = $state(false);
    const close = () => {
        visible = false;
    };
</script>

<Button onclick={() => (visible = true)}>自定义对话框样式</Button>
<Modal bind:visible bodyStyle="overflow: auto; height: 200px" centered onOk={close} title="自定义样式">
    <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 the header, footer and other snippets, you could create any modal to your needs.

Code

<script lang="ts">
    import { IconSemiLogo, IconVigoLogo } from '@fibrae/semi-icons-svelte';
    import { Button, List, ListItem, Modal } from '@fibrae/semi-ui-svelte';

    let visible = $state(false);
    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';
</script>

<Button onclick={() => (visible = true)}>自定义对话框</Button>
<Modal bind:visible>
    {#snippet header()}{/snippet}
    <h3 style="text-align: center; font-size: 24px; margin: 40px">Semi Design New Features</h3>
    <List dataSource={data} split={false}>
        {#snippet item({ item: entry })}
            <ListItem>
                {#snippet header()}
                    <entry.icon style="font-size: 48px" />
                {/snippet}
                {#snippet main()}
                    <div>
                        <h6 style="margin: 0; font-size: 16px">{entry.title}</h6>
                        <p style="margin-top: 4px; color: var(--semi-color-text-1)">{entry.content}</p>
                    </div>
                {/snippet}
            </ListItem>
        {/snippet}
    </List>
    {#snippet footer()}
        <div style="text-align: center">
            <Button style={btnStyle} theme="solid" type="primary" onclick={() => (visible = false)}>Continue</Button>
            <Button style={btnStyle} theme="borderless" type="primary" onclick={() => (visible = false)}>Learn more features</Button>
        </div>
    {/snippet}
</Modal>

Set fullScreen to use full screen Modal

Code

<script lang="ts">
    import { Button, Modal } from '@fibrae/semi-ui-svelte';

    let visible = $state(false);
    const close = () => {
        visible = false;
    };
</script>

<Button onclick={() => (visible = true)}>打开全屏弹窗</Button>
<Modal bind:visible fullScreen onOk={close} title="全屏对话框标题">
    <p>This is a full screen modal</p>
    <p>More content...</p>
</Modal>

You could use static methods to create a confirm Modal. The title, content, icon, closeIcon, header and footer of a static call take a ModalNode: a string or a snippet; icon: null removes the icon. Any other option the Modal supports can be passed too.

Code

<script lang="ts">
    import { IconSend } from '@fibrae/semi-icons-svelte';
    import { Button, Modal } from '@fibrae/semi-ui-svelte';

    const success = () => Modal.success({ title: 'This is a success message', content: 'bla bla bla...' });
    const info = () => Modal.info({ title: 'Here is some info', content: 'bla bla bla...' });
    const error = () => Modal.error({ title: 'Unfortunately, there is an error', content: 'bla bla bla...' });
    const warning = () => Modal.warning({ title: 'Warning: be cautious ahead', content: 'bla bla bla...' });
    const confirm = () => Modal.confirm({ title: 'Are you sure ?', content: 'bla bla bla...' });
    const custom = () =>
        Modal.info({
            title: 'This is a custom modal',
            content: 'bla bla bla...',
            icon: sendIcon,
            cancelButtonProps: { theme: 'borderless' },
            okButtonProps: { theme: 'solid' },
        });
</script>

{#snippet sendIcon()}
    <IconSend />
{/snippet}

<div>
    <Button onclick={info}>Info</Button>
    <br />
    <br />
    <Button onclick={success}>Success</Button>
    <br />
    <br />
    <Button type="danger" onclick={error}>Error</Button>
    <br />
    <br />
    <Button type="warning" onclick={warning}>Warning</Button>
    <br />
    <br />
    <Button type="primary" onclick={confirm}>Confirm</Button>
    <br />
    <br />
    <Button onclick={custom}>Custom</Button>
</div>

useModal Hooks

Modal.useModal() returns { info, success, error, warning, confirm } and has no Holder. It reads the context, ConfigProvider and locale of the component that calls it, so call it during component initialization, in the component that should supply those (usually a child of ConfigProvider). Dialogs it opened are removed when that component is destroyed.

Code

<script lang="ts">
    import { Button, Modal } from '@fibrae/semi-ui-svelte';

    // Reads the contexts (ConfigProvider, LocaleProvider) of this component, so call it during initialization
    const modal = Modal.useModal();
</script>

<div>
    <Button onclick={() => modal.confirm({ title: 'This is a success message', content: 'Context consumer' })}>Confirm Modal</Button>
</div>

DragMove in Svelte is the dragMove attachment. Write {@attach dragMove(options)} directly on <Modal>; the attachment lands on the role="dialog" element and makes the dialog draggable. To place the dialog yourself, use the modal snippet (argument { modal }, placed with {@render modal()}).

Code

<script lang="ts">
    import { Button, dragMove, Modal } from '@fibrae/semi-ui-svelte';

    let visible = $state(false);
</script>

<div>
    <Button onclick={() => (visible = true)}>Open Modal</Button>
    <Modal {@attach dragMove({ positionStrategy: 'relative' })} bind:visible centered title="可拖拽Modal">
        <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, as a string.	`string`	-
cancelButtonProps	Props of the cancel button. autoFocus focuses it on open; 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, written inside the tag.	`Snippet`	-
closable	Whether the close button in the corner is shown.	`boolean`	`true`
closeIcon	Snippet for the icon inside the close button.	`Snippet`	-
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`	-
footer	Snippet that replaces the default footer buttons. An empty snippet or null renders no footer area.	`Snippet \| null`	-
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	Snippet that replaces the whole default header (icon, title and close button). An empty snippet or null renders no header area.	`Snippet \| null`	-
height	Height of the dialog. A number is in pixels; a string is any valid CSS length.	`string \| number`	-
icon	Snippet for the icon before the title.	`Snippet`	-
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, as a string.	`string`	-
modal	Snippet for custom rendering of the dialog itself. Its argument is `{ modal }`, a snippet of the role=dialog element, placed with `{@render modal()}`.	`Type`	-
modalContentClass	Class name of the dialog content element.	`string`	-
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; visible is written back once it fulfills, and a rejection keeps the dialog open. visible is still true while the callback runs.	`Type`	-
onOk	Called when the ok button is clicked. A returned Promise keeps the ok button loading until it settles. The component never closes itself on ok; 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`	-
role	role of the dialog element: dialog or alertdialog.	`'dialog' \| 'alertdialog'`	-
size	Width preset of the dialog: small is 448px, medium 684px, large 920px, full-width 100vw - 64px.	`Size`	`"small"`
title	Title, plain text or a snippet, which also names the dialog. It is a declared prop, so it never lands on an element as the native title attribute.	`string \| Snippet`	-
visible	Whether the dialog is visible, used with bind:visible. The cancel button, the close button, the mask and Esc write false once onCancel returns; ok only calls onOk and the caller sets visible to false.	`boolean`	-
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`

Methods

Method	Description	Type
getRoot	Returns the outermost element inside the portal, or null while nothing is rendered.	`Type`

role and every aria-* attribute land on the role="dialog" element, style lands on the .semi-modal dialog box, and class and other native attributes land on the outermost element inside the portal; an {@attach} written on <Modal> lands on the role="dialog" element. The Modal component does not render content; put the dialog content inside the tag. The content option is only for the static methods below.

Static Method

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

ModalNode is string | Snippet. The options are the props of the Modal component (ModalProps); title, content, icon, closeIcon, header and footer take a ModalNode. 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 = Modal.useModal() during component initialization. Modals created through modal can access everything at the position of the calling component (context, ConfigProvider, locale), and are removed when that component is destroyed. It has no Holder. 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 and Svelte) 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 call Modal.useModal() in a component under that provider, 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?