Toast Notifications

Display toast notifications using the showToast helper function.

Import

import { showToast } from '@zyno-io/vue-foundation';

showToast(options)

Displays a toast notification. Returns a dismiss function.

const dismiss = showToast({
    message: 'Item saved successfully',
    position: 'bottom', // 'top' | 'bottom' (default: 'bottom')
    durationSecs: 5, // auto-dismiss seconds (default: 5, null to keep open)
    className: 'success', // CSS class on toast element
    disableClose: false, // hide close button
    onClick: () => {} // called on click before dismissal
});

// Dismiss programmatically
dismiss();

Options

Option	Type	Default	Description
message	string	--	Toast message text
position	'top' | 'bottom'	'bottom'	Vertical position
durationSecs	number | null	5	Auto-dismiss in seconds (null to keep open)
className	string	--	CSS class on the toast element
disableClose	boolean	false	Hide the close button
onClick	() => void	--	Called on click before dismissal

Notes

• Toasts include an animated progress bar that shows remaining time.
• Clicking the toast or the close button dismisses it.
• Style with the .vf-toast CSS class.

Demo

<template>
    <div data-testid="demo-toast" style="display: flex; flex-wrap: wrap; gap: 8px">
        <button data-testid="toast-bottom" @click="showBottomToast">Toast (bottom)</button>
        <button data-testid="toast-top" @click="showTopToast">Toast (top)</button>
        <button data-testid="toast-persistent" @click="showPersistentToast">Persistent toast</button>
        <button data-testid="toast-clickable" @click="showClickableToast">Clickable toast</button>
    </div>
</template>

<script lang="ts" setup>
import { showToast, showAlert } from '@zyno-io/vue-foundation';

function showBottomToast() {
    showToast({
        message: 'Item saved successfully!',
        position: 'bottom',
        durationSecs: 3
    });
}

function showTopToast() {
    showToast({
        message: 'New notification received',
        position: 'top',
        durationSecs: 3
    });
}

function showPersistentToast() {
    const dismiss = showToast({
        message: 'This toast stays until you close it',
        durationSecs: null
    });
    // Could call dismiss() programmatically later
}

async function showClickableToast() {
    showToast({
        message: 'Click me for details!',
        durationSecs: 5,
        onClick: () => {
            showAlert('You clicked the toast!');
        }
    });
}
</script>