React 组件

UGAlert 提示

UGAlert 用于页面内重要提醒，适合持续可见的信息提示或风险告知。

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import { UGAlert, UGAlertTitle, UGAlertDescription } from '@ug666/ui-react'

变体预览

信息、成功、警告与危险提示。

信息已更新

当前页面显示最新的业务状态。

提交成功

变更已保存并通知相关成员。

内容待确认

请核对表单内容与操作范围是否一致。

提交失败

请检查表单内容后重试。

状态展示

适合强调持续状态，而非瞬时反馈。

默认提示

用于通用说明与注意事项。

长内容与窄容器

标题、说明和技术标识均可安全换行，不会挤压图标或撑破页面。

跨区域协作空间的发布权限即将调整

请在提交前核对任务 release-production-ap-southeast-2026-08-05 的负责人、审核成员和通知范围。

代码示例

UGAlert 最适合放在页面主体中持续可见的位置。

tsx

import { UGAlert, UGAlertDescription, UGAlertTitle } from '@ug666/ui-react'

export function PublishAlert() {
  return (
    <UGAlert variant="warning">
      <UGAlertTitle>发布前确认</UGAlertTitle>
      <UGAlertDescription>当前页面仍包含未翻译的英文内容，请先检查完整性。</UGAlertDescription>
    </UGAlert>
  )
}

属性

属性	类型	默认值	说明
variant	'default' \| 'info' \| 'success' \| 'warning' \| 'destructive'	'default'	定义提示语义与配色。
role	'status' \| 'alert'	按 variant 推导	默认仅 warning/destructive 使用即时警报，其余使用非打断式状态；可按业务紧急程度覆盖。
children	ReactNode	—	通过 UGAlertTitle 与 UGAlertDescription 组合内容。