Notification

Global toast stack host: show transient success/error/info messages via methods or .toasts array.

HTML tag: c-edf88a08359104e5db444e66d06c4541f

When to use

• app-wide toast / snackbar stack
• success or error feedback after actions
• not modal dialogs or inline field errors

Props

Prop	Type	Default	Description
position	String	top-right
auto_close	Number	5000
pause_on_hover	Boolean	true
newest_on_top	Boolean
toasts	Array
close_on_click	Boolean	true
pause_on_focus_loss	Boolean	true
hide_progress_bar	Boolean
stacked	Boolean
limit	Number
rtl	Boolean
enable_multiple_containers	Boolean

Rules

• Place once per app shell (often in page template).
• Call toast(), success(), error(), warning(), info() with message + options.
• position, auto_close, pause_on_hover, newest_on_top configure stack.
• Listen toast-added / toast-removed / toast-clicked for analytics.

Events

Event	Detail
toast-added	toast: Object
toast-removed	toastId: String
toast-clicked	toast: Object

Methods

Signature	Description
toast(message: String, options: Object)
success(message: String, options: Object)
error(message: String, options: Object)
warning(message: String, options: Object)
info(message: String, options: Object)
dismiss(toastId: String)
dismissAll()
isActive(toastId: String)
updateToast(toastId: String, options: Object)

What to avoid

Do not use ab-dialog for brief success messages. Do not duplicate multiple notification hosts. Not for inline form validation text (field helpers).

Example

<c-edf88a08359104e5db444e66d06c4541f id="toasts" .position=${'top-right'}></c-edf88a08359104e5db444e66d06c4541f>
<!-- later --> document.querySelector('#toasts').success('Saved')