Toast

Toast is a wrapper to position alert components at the corner of the screen. Perfect for notifications and temporary messages.

const { default: Toast } = await import('/components/data-display/toast.js');
const { default: Alert } = await import('/components/data-display/alert.js');

const { tags, $ } = Lightview;
const { span } = tags;

// Toast positioned at bottom-end (default)
const toast = Toast({ position: 'end', vertical: 'bottom' },
    Alert({ color: 'success', icon: 'success' },
        span({}, 'Message sent successfully!')
    )
);

$('#demo').insert(toast);

const { default: Toast } = await import('/components/data-display/toast.js');
const { default: Alert } = await import('/components/data-display/alert.js');
const { default: Button } = await import('/components/actions/button.js');

const { signal, tags, $ } = Lightview;
const { div, span } = tags;

const notifications = signal([]);
let id = 0;

const addNotification = (type) => {
    const messages = {
        success: '✓ Action completed!',
        info: 'ℹ️ New update available',
        warning: '⚠️ Please review',
        error: '✕ Something went wrong'
    };
    const newId = ++id;
    notifications.value = [...notifications.value, { id: newId, type, msg: messages[type] }];
    // Auto-remove after 3 seconds
    setTimeout(() => {
        notifications.value = notifications.value.filter(n => n.id !== newId);
    }, 3000);
};

const demo = div({},
    div({ class: 'flex flex-wrap gap-2 mb-4' },
        Button({ color: 'success', size: 'sm', onclick: () => addNotification('success') }, 'Success'),
        Button({ color: 'info', size: 'sm', onclick: () => addNotification('info') }, 'Info'),
        Button({ color: 'warning', size: 'sm', onclick: () => addNotification('warning') }, 'Warning'),
        Button({ color: 'error', size: 'sm', onclick: () => addNotification('error') }, 'Error')
    ),
    () => Toast({ position: 'end', vertical: 'top' },
        ...notifications.value.map(n => 
            Alert({ color: n.type, key: n.id }, span({}, n.msg))
        )
    )
);

$('#demo').insert(demo);

Props

Positions

Click to see toast position (shown for 3 seconds):