Toast Component Demo - @liwe3/webcomponents

Basic Toast Types

Click the buttons below to see different toast notification types. Each type has its own color scheme and default icon.

Auto-Dismiss Toasts

These toasts will automatically disappear after a specified duration.

Toasts with Custom Icons

Add custom images or icons to your toast notifications.

Toasts with Action Buttons

Add action buttons to your toasts for user interaction.

Non-Closable Toast

Create toasts without the close button (must auto-dismiss or close programmatically).

Toast Positioning

Position toasts in different areas of the screen. Each position creates its own independent container.

Usage Example

// Import the toastAdd function
import { toastAdd } from '@liwe3/webcomponents';

// Show a toast notification
toastAdd({
  title: 'Success!',
  text: 'Your changes have been saved.',
  type: 'success',
  duration: 5000,
  position: 'TR', // TL, T, TR, BL, B, BR (default: TR)
  closable: true,
  buttons: [
    {
      label: 'Undo',
      onClick: () => console.log('Undo clicked')
    },
    {
      label: 'View',
      onClick: () => console.log('View clicked')
    }
  ]
});