Alert Dialog

A modal dialog that interrupts the user with important content and expects a response. Becomes a bottom drawer on compact touch screens.

Usage

SAlertDialog() {
  SAlertDialogTrigger() { SButton({ text: 'Delete account', variant: 'destructive' }) }
  SAlertDialogContent() {
    SDialogHeader() {
      SDialogTitle({ text: 'Are you absolutely sure?' })
      SDialogDescription({ text: 'This action cannot be undone.' })
    }
    SDialogFooter() {
      SAlertDialogCancel()
      SAlertDialogAction({ text: 'Continue', onAction: () => this.deleteAccount() })
    }
  }
}

Approximate web preview — the HarmonyOS rendering is the reference.

API

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

SAlertDialog

shadcn-vue AlertDialog: a modal dialog that interrupts the user and expects a response. Unlike Dialog it has no close button and ignores backdrop taps; the back gesture / Esc still cancel. Header, Title, Description and Footer are the Dialog parts (SDialogHeader … SDialogFooter).

Controlled (open: this.show!! or open + onOpenChange): Action / Cancel / back only request closing; the dialog closes when the parent's open flows back false (like SDialog), so the parent can refuse.

Prop	Type	Default	Description
open!!	boolean | undefined	undefined
defaultOpen	boolean	false

Event	Type	Default	Description
onOpenChange	(open: boolean) => void	() => { }

Slots: children (trailing closure)

SAlertDialogTrigger

Slots: children (trailing closure)

SAlertDialogContent

Alert panel: no close button, backdrop taps ignored, Drawer on compact touch screens.

Slots: children (trailing closure)

SAlertDialogAction

Primary action; runs onAction, then closes the dialog (a controlled owner may refuse). Attach the work with onAction — a .onClick() chained on this component does not fire (the button's own click takes it).

Prop	Type	Default	Description
text	ResourceStr	$r('app.string.spark_continue')
variant	ButtonVariant ButtonVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'	'default'	e.g. 'destructive' for dangerous actions
disabled	boolean	false

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

SAlertDialogCancel

Cancel button (outline); runs onCancel, then closes the dialog.

Prop	Type	Default	Description
text	ResourceStr	$r('app.string.spark_cancel')

Event	Type	Default	Description
onCancel	() => void	() => { }