Toast - Component Showcase

Trigger Toasts

Click the buttons below to trigger different toast notifications.

Toaster Positions

The Toaster component can be positioned in different corners of the screen.

Usage

1. Add Toaster to your layout

<twig:Toaster position="bottom-right" />

2. Trigger toasts via Stimulus outlet

// In your controller, declare the toaster outlet
static outlets = ['toaster'];

// Then call toast() on the outlet
this.toasterOutlet.toast({
    title: 'Success!',
    description: 'Your changes have been saved.',
    variant: 'success', // 'default' | 'success' | 'destructive' | 'warning'
    duration: 5000, // Auto-dismiss after 5 seconds (0 = no auto-dismiss)
    action: {
        label: 'Undo',
        onClick: () => console.log('Undo clicked')
    }
});