Toast

Notification toasts

View Source

Examples

Interactive Demo

Click buttons to trigger different toast types.

html

Positions

Toast can appear in different screen positions.

html

Usage

Cleopatra - Modern Admin Dashboard
// Simple toast
        toast.show({ title: 'Hello!', description: 'This is a toast.' });
    
        // With variant
        toast.success({ title: 'Saved!', description: 'Changes saved.' });
        toast.error({ title: 'Error', description: 'Something failed.' });
        toast.warning({ title: 'Warning', description: 'Be careful!' });
        toast.info({ title: 'Info', description: 'FYI...' });
    
        // With options
        showToast({
        title: 'Custom',
        description: 'With custom options',
        variant: 'success',
        position: 'bottom-right',
        duration: 3000,
        closable: true
        });

Options

Option Type Default
title string ''
description string ''
variant default | success | warning | destructive | info 'default'
position top-right | top-left | bottom-right | etc. 'top-right'
duration number (ms) 5000