Alert

Displays a callout for user attention.

Usage

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.' })
}

Approximate web preview — the HarmonyOS rendering is the reference.

Status variants

success | warning | info (+ destructive), plain or soft.

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' })

Approximate web preview — the HarmonyOS rendering is the reference.

Actions, dismissible, compact

A dismissed alert hides itself with the alert motion and emits 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 })

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

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. The destructive variant tints title / icon with text-destructive and the description with text-destructive/90.

heading / description are shortcuts for a title / description without a slot.

Variants: default | destructive | success | warning | info (title and icon take the tone colour). Extras: soft (tinted background and border), compact (tighter padding, centred row), actionLabel + onAction (trailing outline button), dismissible (trailing ×; the alert hides itself and emits onDismiss).

Prop	Type	Default	Description
variant	AlertVariant AlertVariant = 'default' | 'destructive' | 'success' | 'warning' | 'info'	'default'
icon	string | undefined	undefined	lucide icon name shown in the leading column.
heading	ResourceStr | undefined	undefined
description	ResourceStr | undefined	undefined
soft	boolean	false	Tinted background and border in the variant colour.
compact	boolean	false	Tighter padding (px-3 py-2), items centred.
actionLabel	ResourceStr | undefined	undefined	Text of a trailing action button.
dismissible	boolean	false	Trailing × button; the alert hides itself (motion key 'alert') and emits onDismiss.
modifier	AttributeModifier<RowAttribute>	new SparkNoopModifier<RowAttribute>()
tokens	AlertTokens	{}	Per-instance token overrides (instance → theme --alert-* → recipe), see {@link AlertTokens}.

Event	Type	Default	Description
onAction	() => void	() => { }
onDismiss	() => void	() => { }

Slots: children (trailing closure)

SAlertTitle

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

Prop	Type	Default	Description
text	ResourceStr	''

SAlertDescription

text-muted-foreground col-start-2 text-sm [&_p]:leading-relaxed (destructive: text-destructive/90).

Prop	Type	Default	Description
text	ResourceStr | undefined	undefined

Slots: children (trailing closure)