Alert

提示（Alert）用于在页面中展示简短的提示信息，向用户传达操作结果、系统状态或需要关注的内容。

import { Alert, AlertRoot, AlertTitle, AlertDescription, AlertWrapper } from '@skyroc/web-ui';

何时使用

• 需要向用户反馈操作结果时（如成功、失败、警告）。
• 展示系统级消息或状态变化（如网络错误、版本更新）。
• 在表单或流程中给予用户必要的提示信息。
• 相比 Toast，Alert 更适合需要持续展示在页面中、不会自动消失的场景。

颜色

Alert 提供 8 种主题颜色，每种颜色都有其语义含义：

变体

通过 variant 控制 Alert 的视觉强度，从高到低依次为：

描述文本

通过 title 和 description 组合展示标题与补充说明，适合需要更多上下文的提示场景。

图标

通过 icon 插槽在 Alert 起始位置放置图标，增强信息的可识别性。图标会自动继承当前颜色主题。

完整示例

结合 icon、title、description 和 trailing 插槽，构建功能完整的提示组件。trailing 可放置关闭按钮或其他操作。

尺寸

通过 size 调整 Alert 的字号与间距，从 xs 到 2xl 共 6 个尺寸。

API

Alert

通用属性参考：支持原生 div 元素的所有属性。

类型