Modal

弹窗家族，当前提供 ConfirmationDialog 预设 5 种语义色 × 2 种布局。

ConfirmationDialog

确认对话框，用于关键动作二次确认（删除 / 发送 / 保存 / 升级 / 激活等）。

Import

import { ConfirmationDialog } from "@forge-ui/react";

Usage

传入 title / description / icon，color 决定主按钮色。

Delete this item?

Lorem ipsum dolor sit amet lorem? This action can't be undone

1<ConfirmationDialog
2  color="red"
3  layout="spread"
4  title="Delete this item?"
5  description="This action can't be undone"
6  confirmLabel="Delete"
7  cancelLabel="Cancel"
8  icon={<DangerBold size={32} color="currentColor" />}
9/>

Colors

5 种语义色：red 危险 / green 成功 / yellow 警示 / purple 推广 / blue 通知。

Delete?

This action can't be undone

Send message?

Your reply will be visible to all members

Unsaved changes

Do you want to save before leaving?

Upgrade now?

Unlock all Pro features for $12/month

Enable notifications?

You'll get alerts for key activities

1<ConfirmationDialog color="red" icon={<DangerBold size={32} />} ... />
2<ConfirmationDialog color="green" icon={<PlainBold size={32} />} ... />
3<ConfirmationDialog color="yellow" icon={<DangerTriangleBold size={32} />} ... />
4<ConfirmationDialog color="purple" icon={<RocketBold size={32} />} ... />
5<ConfirmationDialog color="blue" icon={<BellBold size={32} />} ... />

Layout

spread 居中对齐，按钮左右铺开；right 文案左对齐，按钮靠右。

Spread layout

Centered, buttons span full width

Right layout

Text left-aligned, buttons on the right

1<ConfirmationDialog layout="spread" ... />
2<ConfirmationDialog layout="right" ... />

API

Attribute	Type	Default	Description
`color`	`'red' \| 'green' \| 'yellow' \| 'purple' \| 'blue'`	`'red'`	语义色，决定 icon 颜色与主按钮色。
`layout`	`'spread' \| 'right'`	`'spread'`	spread 居中左右铺开按钮，right 左对齐文字、按钮在右。
`title`	`string`	`—`	对话框标题。
`description`	`string`	`—`	描述文案。
`confirmLabel`	`string`	`'Confirm'`	主按钮文案。
`cancelLabel`	`string`	`'Cancel'`	次按钮文案。
`icon`	`ReactNode`	`—`	左上方的 32px 图标，建议 solar-icon-set Bold 系列。
`onConfirm`	`() => void`	`—`	主按钮点击回调。
`onCancel`	`() => void`	`—`	次按钮点击回调。

看所有变体 →