Toast

An opinionated toast. Bottom-right on wide windows, bottom-centre on compact ones. Swipe sideways to dismiss; touches outside the toasts go straight to the page.

Usage

SparkToast.show('Event has been created', {
  description: 'Sunday, December 03, 2023 at 9:00 AM',
  action: new SparkToastAction('Undo', () => this.undo())
})
SparkToast.success('Profile saved')
const id = SparkToast.loading('Uploading…')
SparkToast.update(id, 'Uploaded', { variant: 'success' })

Approximate web preview — the HarmonyOS rendering is the reference.

Duration

Each toast auto-dismisses after its duration (default 4 s). Pass duration: 0 to keep it until it is swiped away or dismissed; SparkToast.configure() sets the defaults.

SparkToast.show('Gone in 2 seconds', { duration: 2000 })
SparkToast.info('Stays for 10 seconds', undefined, 10000)
SparkToast.warning('Pinned', 'Swipe it sideways to dismiss.', 0)   // 0 = until dismissed
SparkToast.dismissAll()

// app-wide defaults
SparkToast.configure({ duration: 6000, max: 4 })

Approximate web preview — the HarmonyOS rendering is the reference.

API

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

SToastSlot

Content of one toast layer: resolves its item from the layer's context and draws the card at the toaster width (full width minus margins on compact windows, 356vp otherwise).

No props.