Toast & Notification Queue

const toast = useToast()

toast.success('Changes saved successfully!')
toast.info('New message arrived in inbox')
toast.warning('Your storage is at 85% capacity')
toast.error('Failed to sync changes with server')
toast.primary('System upgrade is scheduled for midnight')

const toast = useToast()

toast.info('Top Left Alert', { position: 'top-left' })
toast.info('Top Center Alert', { position: 'top-center' })
toast.info('Top Right Alert', { position: 'top-right' })
toast.info('Bottom Left Alert', { position: 'bottom-left' })
toast.info('Bottom Center Alert', { position: 'bottom-center' })
toast.info('Bottom Right Alert', { position: 'bottom-right' })

const toast = useToast()

// Spawn multiple toasts to observe stack layout and smooth reordering
toast.info('First queued notification', { duration: 5000 })
toast.warning('Second queued notification', { duration: 6000 })
toast.success('Third queued notification', { duration: 7000 })

// Or clear all active toasts at once
toast.clear()

const toast = useToast()

// Hovering the toast automatically freezes the countdown timer
toast.info('Hover over me to pause the countdown timer!', {
	duration: 4000,
	pauseOnHover: true
})

KButton(@click="showBasic = true") Show Basic Toast
KToast(v-model="showBasic" text="This is a basic standalone toast message")

KButton(@click="showTeleport = true") Show Teleported Standalone
KToast(v-model="showTeleport" text="I am teleported to body directly!" :teleport="true" type="success")

KButton(@click="showRich = true" type="primary") Show Rich HTML Toast

KToast(v-model="showRich" :teleport="true" type="primary" :timeout="8000" title="Deployment Complete")
	.rich-toast-content
		.rich-toast-row
			span.rich-badge PROD
			span Build #428 deployed to Frankfurt region.
		.rich-toast-actions
			NuxtLink.rich-link(to="/components/button") View Release Notes →
			button.rich-action-btn(@click="onUndoClick") Rollback