Modal popup
A modal view that interrupts the current operation, used to display important prompts or request the user to perform critical actions.
Anatomy
Modal Title
计划的佣金操作存在一定风险；建议在使用前阅读用户说明，并仔细核实交易数据。
Checkbox
Secondary
Primary
1
4
2
3
1: Title
Optional, supports business customization
2: Body
Required. When the maximum height is triggered, the content area becomes scrollable and supports custom business configurations.
3: Checkbox
Optional, can scroll with the content area
4: Header
Optional, usually a text button or button group
1: Title
Optional, supports business customization
2: Custom Area
There must be specific content passed in based on business requirements (including but not limited to text descriptions, forms, tables, step indicators, notifications, filter components, or custom module cards and other custom styles).
3: Main text
Required. When the maximum height is triggered, the content area becomes scrollable and supports custom business configurations.
4: checkbox
Optional, can scroll with the content area
5: footer
Optional, usually a button group
6: Placeholder Image
Optional, defaults to the status icon. Supports custom business icons. When the placeholder image is enabled, the top title should be hidden.
Modal Title
❖
Replace me
计划的佣金操作存在一定风险；建议在使用前阅读用户说明，并仔细核实交易数据。
Checkbox
Secondary
Primary
Modal Title
计划的佣金操作存在一定风险；建议在使用前阅读用户说明，并仔细核实交易数据。
Secondary
Primary
Text Modal pure text dialog:
Slot Modal Custom Popup:
1
2
5
3
4
6
Variant/Type
Text Modal pure text dialog:
All configuration switches turned on:
Modal Title
计划的佣金操作存在一定风险；建议在使用前阅读用户说明，并仔细核实交易数据。
Checkbox
Secondary
Primary
No footer:
Modal Title
计划的佣金操作存在一定风险；建议在使用前阅读用户说明，并仔细核实交易数据。
Untitled & Close:
计划的佣金操作存在一定风险；建议在使用前阅读用户说明，并仔细核实交易数据。
Secondary
Primary
Slot Modal Custom Popup:
Regular Custom (with Checkbox):
Modal Title
❖
Replace me
计划的佣金操作存在一定风险；建议在使用前阅读用户说明，并仔细核实交易数据。
Checkbox
Secondary
Primary
Untitled & Content:
❖
Replace me
Secondary
Primary
No footer:
Modal Title
❖
Replace me
Slot only:
❖
Replace me
Status:
Modal Title
计划的佣金操作存在一定风险；建议在使用前阅读用户说明，并仔细核实交易数据。
Secondary
Primary
Usage scenario
Modal Title
计划的佣金操作存在一定风险；建议在使用前阅读用户说明，并仔细核实交易数据。
Secondary
Primary
Type description:
When to use Text-only Modals:
Requiring immediate user response
Notifying users of urgent information
Confirming user decisions
When to use Custom Modals:
When plain text cannot support the styles required by the demand
For situations needing feature introductions, guidance, operations, feedback, etc.
A Modal is a modal pop-up that interrupts the user's flow. As described above, for necessary and urgent prompts, consider using a Modal; for other situations, prioritize using a BottomSheet.
Label
Text Modal pure text dialog:
All configuration switches turned on:
Modal Title
计划的佣金操作存在一定风险；建议在使用前阅读用户说明，并仔细核实交易数据。
Checkbox
Secondary
Primary
No footer:
Modal Title
计划的佣金操作存在一定风险；建议在使用前阅读用户说明，并仔细核实交易数据。
Untitled & Close:
计划的佣金操作存在一定风险；建议在使用前阅读用户说明，并仔细核实交易数据。
Secondary
Primary
Slot Modal Custom Popup:
Regular Custom (with Checkbox):
Modal Title
❖
Replace me
计划的佣金操作存在一定风险；建议在使用前阅读用户说明，并仔细核实交易数据。
Checkbox
Secondary
Primary
Untitled & Content:
❖
Replace me
Secondary
Primary
No footer:
Modal Title
❖
Replace me
Slot only:
❖
Replace me
Status:
Modal Title
计划的佣金操作存在一定风险；建议在使用前阅读用户说明，并仔细核实交易数据。
Secondary
Primary
sm
16
sm
16
sm
16
sm
16
md
24
sm
16
sm
16
sm
16
md
24
sm
16
sm
16
sm
16
sm
16
sm
16
sm
16
sm
16
sm
16
sm
16
md
24
sm
16
Extra Small
12
md
24
sm
16
sm
16
Annotation instructions:
Pop-up title text 18 Bold, body text 14 Medium
When the pop-up has buttons, the bottom padding of the body is 24px; when there are no buttons, the bottom padding of the body is 16px
When the pop-up style is a status pop-up (i.e., there is a placeholder image at the top), the default top title is not displayed, and the body title + body text below need to be enabled
Multilingual adaptation
Title is too long: maximum of two lines, if still too long dynamically shrink to 16pt, if still too long then truncate with ellipsis
Button too long: Dynamically shrink, or wrap the button text if the effect is poor
Modal Title Modal Title Modal Title Modal Title Modal Title Modal Title Modal Title...
计划的佣金操作存在一定风险；建议在使用前阅读用户说明，并仔细核实交易数据。
Secondary
Primary
Modal Title Modal Title Modal Title Modal Title Modal Title Modal Title Modal Title ...
❖
Replace me
Secondary
Primary
Modal Title
计划的佣金操作存在一定风险；建议在使用前阅读用户说明，并仔细核实交易数据。
Secondary Button
Primary Button
Modal Title
❖
Replace me
Secondary Button
Primary Button
Modal Title
计划的佣金操作存在一定风险；建议在使用前阅读用户说明，并仔细核实交易数据。
Primary Button
Secondary Button
Modal Title
❖
Replace me
Primary Button
Secondary Button
16
16
RTL
Modal Title
计划的佣金操作存在一定风险；建议在使用前阅读用户说明，并仔细核实交易数据。
Checkbox
Secondary
Primary
LTR
Modal Title
The "Scheduled Commission" operation carries certain risks; it is recommended to read the user instructions and carefully verify transaction data before use.
Checkbox
Secondary
Initial
RTL
Usage
Notification
Delete this item?
Cancel
Delete
Do
Notification
Delete this item?
No
Yes
Don't
For risky operations, it is recommended to emphasize the primary button by using a red color representing danger/error to prevent accidental clicks, and the semantics should also be made clearer.