FormWidgets / Other / Toast

Toast

fw-toast

A notification widget for displaying non-blocking alerts. Supports multiple positions, variants (success, error, etc.), and automatic dismissal.

View Examples

Usage

Quick Notification

The easiest way to show a toast is using the static helper method. This automatically creates a container if one doesn't exist.

JavaScript
// Simple info toast
FormWidgets.notify('Operation completed successfully.');

// Success toast
FormWidgets.notify('Data saved!', 'success');

// Error toast with options
FormWidgets.notify('Connection failed.', 'error', { duration: 5000 });

Custom Container

You can initialize a specific element as a toast container to control positioning or grouping.

HTML + JS
<div id="my-toasts"></div>

<script>
const toaster = FormWidgets.init('#my-toasts', 'Toast', {
    position: 'bottom-right',
    maxToasts: 3
});

toaster.show('Hello World!', { type: 'warning' });
</script>

Options

OptionTypeDefaultDescription
positionstring'top-right'Screen position. Options: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'top-center', 'bottom-center'.
durationnumber3000Time in milliseconds before the toast auto-dismisses. Set to 0 to disable auto-dismiss.
dismissiblebooleantrueWhether to show a close (x) button.
maxToastsnumber5Maximum number of toasts to show at once. Older toasts are removed when limit is reached.

Methods

FormWidgets.notify(message, type, options)

Static helper to show a global toast.

Parameters:
message (string): The text or HTML content.
type (string): 'info', 'success', 'warning', 'error'.
options (object): Override defaults (duration, etc).
widget.show(message, options)

Shows a toast in the initialized container.

widget.clear()

Dismisses all active toasts in the container.

Features

Variants

Built-in styles for Success, Error, Warning, and Info.

Positioning

Place toasts in any corner or center of the screen.

Auto-Dismiss

Configurable timer to automatically remove notifications.

Queue Management

Limits the number of visible toasts to prevent clutter.

Notes

Global Container

When using FormWidgets.notify(), a global container is automatically created and appended to the <body>. You don't need to add any HTML markup manually.