FormWidgets / Toast / Examples

Toast Examples

Live examples of Toast notifications. Click the buttons to trigger different types of alerts.

View Documentation

1. Notification Types

Standard variants for different message contexts.

JavaScript
FormWidgets.notify('This is an info message', 'info');
FormWidgets.notify('Operation successful!', 'success');
FormWidgets.notify('Warning: Check your input', 'warning');
FormWidgets.notify('Error: Could not save', 'error');

2. Custom Duration

Control how long the toast stays visible. Set to 0 to keep it until manually dismissed.

JavaScript
// Auto-dismiss after 1 second
FormWidgets.notify('Quick!', 'info', { duration: 1000 });

// Never auto-dismiss
FormWidgets.notify('Sticky Toast', 'warning', { duration: 0 });

3. Custom Container & Position

Initialize a specific container to control positioning (e.g., bottom-left).

HTML + JS
<div id="custom-toast-container"></div>

<script>
const toaster = FormWidgets.init('#custom-toast-container', 'Toast', {
    position: 'bottom-left'
});

toaster.show('I am in the bottom left!', { type: 'success' });
</script>