Sonner

Overview

A toast notification container built on vue-sonner, providing styled toast popups with registry-backed icons for success, info, warning, error, loading, and close states.

It reads these icon names from the Sonner registry entry: check for success, info, triangleExclamation for warning, close for error and for the close button, and loading.

Theme entry: Sonner

Props

Name	Type	Required	Default	Description
iconOverride	Object		null	A partial icon registry ({ [componentName]: { [iconName]: { component, props } } }) merged with inherited and default icon entries; scopes icon overrides to this component and its descendants.
themeOverride	Object		null	A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants.
class	import('vue').HTMLAttributes['class']		undefined	Additional CSS classes to apply to the root element.
position	string		undefined	The position of the toaster on screen.
closeButton	boolean		true	Whether toasts should be shown with a close button. Defaults to true: without it, drag-to-dismiss is the only way to close a toast early, and that gesture has no visual affordance.
richColors	boolean		undefined	Whether rich colors should be used.
invert	boolean		undefined	Whether the newest toast should appear on top.
visibleToasts	number		undefined	Maximum number of toasts shown at once.
duration	number		undefined	Duration in ms before a toast auto-dismisses.
gap	number		undefined	Gap between toasts in pixels.
as	string|object		undefined	The element or component to render as.

Source

client/lib/feedback/toast/Sonner.vue