Alert 警告提示

显示一条引起用户注意的提示。

基础用法

SAlert({ icon: 'circle-check' }) {
  SAlertTitle({ text: 'Success! Your changes have been saved' })
  SAlertDescription({ text: 'This is an alert with icon, title and description.' })
}
SAlert({ icon: 'info', heading: 'This Alert has a title and an icon. No description.' })
SAlert({ variant: 'destructive', icon: 'circle-alert' }) {
  SAlertTitle({ text: 'Unable to process your payment.' })
  SAlertDescription({ text: 'Please verify your billing information and try again.' })
}

网页近似预览，真机效果以 HarmonyOS 渲染为准。

状态变体

success | warning | info（以及 destructive），普通或柔和样式。

SAlert({ variant: 'success', icon: 'circle-check', heading: 'Deployment finished',
  description: 'Your site is live at sparkui.dev.' })
SAlert({ variant: 'warning', icon: 'triangle-alert', heading: 'Your trial ends in 3 days' })
SAlert({ variant: 'info', icon: 'info', heading: 'A new version is available' })
// soft: tinted surface and border
SAlert({ variant: 'success', soft: true, icon: 'circle-check', heading: 'Payment received' })
SAlert({ variant: 'warning', soft: true, icon: 'triangle-alert', heading: 'Storage almost full',
  description: '9.2 GB of 10 GB used.' })
SAlert({ variant: 'destructive', soft: true, icon: 'circle-alert', heading: 'Build failed' })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

操作、可关闭、紧凑

被关闭的提示会以 alert 动效自行隐藏，并触发 onDismiss。

SAlert({ variant: 'info', icon: 'info', heading: 'Update available',
  description: 'Version 2.0 brings charts and blocks.', actionLabel: 'Update',
  onAction: () => ..., dismissible: true, onDismiss: () => ... })
SAlert({ variant: 'warning', soft: true, compact: true, icon: 'triangle-alert',
  heading: 'Unsaved changes', actionLabel: 'Save' })
SAlert({ compact: true, icon: 'bell', heading: 'Notifications are muted', dismissible: true })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SAlert

shadcn-vue 的 Alert：relative w-full rounded-lg border px-4 py-3 text-sm grid grid-cols-[16px_1fr] gap-x-3 gap-y-0.5 items-start，背景为 bg-card。destructive 变体会将标题 / 图标着色为 text-destructive，描述着色为 text-destructive/90。

heading / description 是无需插槽时标题 / 描述的快捷写法。

变体：default | destructive | success | warning | info（标题与图标采用对应的色调）。其他选项：soft（带色调的背景和边框）、compact（更紧凑的内边距，居中排列）、actionLabel + onAction（尾部的 outline 按钮）、dismissible（尾部的 ×；警告会自行隐藏并触发 onDismiss）。

属性	类型	默认值	说明
variant	AlertVariant AlertVariant = 'default' | 'destructive' | 'success' | 'warning' | 'info'	'default'
icon	string | undefined	undefined	显示在前导列中的 lucide 图标名称。
heading	ResourceStr | undefined	undefined
description	ResourceStr | undefined	undefined
soft	boolean	false	带变体颜色的浅色背景与边框。
compact	boolean	false	更紧凑的内边距（px-3 py-2），内容居中。
actionLabel	ResourceStr | undefined	undefined	尾部操作按钮的文字。
dismissible	boolean	false	尾部的 × 按钮；警告会自行隐藏（动效 key 为 'alert'）并触发 onDismiss。
modifier	AttributeModifier<RowAttribute>	new SparkNoopModifier<RowAttribute>()
tokens	AlertTokens	{}	实例级令牌覆盖（实例 → 主题 --alert-* → 配方），参见 {@link AlertTokens}。

事件	类型	默认值	说明
onAction	() => void	() => { }
onDismiss	() => void	() => { }

插槽: 子组件（尾随闭包）

SAlertTitle

col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight。

属性	类型	默认值	说明
text	ResourceStr	''

SAlertDescription

text-muted-foreground col-start-2 text-sm [&_p]:leading-relaxed（destructive：text-destructive/90）。

属性	类型	默认值	说明
text	ResourceStr | undefined	undefined

插槽: 子组件（尾随闭包）