Toast

A toast notification component that displays temporary messages to users. It supports various options like custom actions, descriptions, and custom body components.

API

pushToast

The main function to create and display a toast notification. It returns the toast object it just created including the id which can be used to remove the toast before the user dismisses it.

NameTypeDescription
titlestringThe main message of the toast
optionsToastOptionsOptional configuration for the toast

ToastOptions

NameTypeDefaultDescription
persistbooleanfalseWhether the toast should persist until manually dismissed
timeoutnumber7000Time in milliseconds before the toast automatically disappears
actionToastAction-Optional action button configuration
descriptionstring-Additional descriptive text to display below the title
bodyComponent-Custom Vue component to render in the toast body
bodyPropsobject{}Props to pass to the custom body component

ToastAction

NameTypeDescription
labelstringText to display on the action button
handler(toastId: number) => voidFunction to call when the action is clicked

removeToast

Function to manually remove a toast notification.

NameTypeDescription
idnumberThe ID of the toast to remove

Examples

Persistent Toast

Custom Body Toast