JavaScript APIs

Toasts

The JavaScript API for the Toasts component.

The mod.toast() method automatically injects the .mod-overlay component into your app's <body> tag and handles the lifecycle of toasts that you display.

Method API

// Using mod(-plus).iife.min.js
window.mod.toast(options: object) => object;

// Using mod(-plus).esm.min.js
import { toast } from 'path/to/mod(-plus).esm.min.js';
toast(options: object) => object;

Usage Examples

Use the following usage examples to guide your implementation.

Examples Use Global JavaScript

For simplicity, all usage examples demonstrate usage with Mod's global JavaScript library (mod(-plus).iife.min.js). All documented behavior is identical in the ESM variant of Mod's JavaScript library.

Toasts JavaScript

// NOTE: Initialize the toasts class.
const toasts = window.mod.toast({ position: 'bottom-right' });

// NOTE: Show a generic toast with a title and message.
toasts.alert({
  title: 'Processing...',
  message: 'Your video is uploading and will be processed shortly.'
});

// NOTE: Show a brand toast with an icon, title, and message.
toasts.brand({
  icon: 'star',
  title: 'Added to Favorites',
  message: 'Your bookmark was successfully added!',
});

// NOTE: Show an info toast with a message.
toasts.info('Testing 123');

// NOTE: Show a success toast with a message.
toasts.success('Testing 123');

// NOTE: Show a warning toast with a message.
toasts.warning('Testing 123');

// NOTE: Show a danger toast with a message.
toasts.danger('Testing 123');

API

options object

Configuration options for the toast instance.

position string: Position where toasts appear. Options: bottom-right, bottom-left, top-right, top-left. Default: bottom-right.
square boolean: Whether to use square corners for toasts. Default: false.

Return Value

The toast() method returns a toast instance with the following methods:

alert function: Shows a default toast. Accepts a string message or object with title/message/icon properties.
brand function: Shows a brand-themed toast. Accepts a string message or object with title/message/icon properties.
info function: Shows an info-themed toast. Accepts a string message or object with title/message/icon properties.
success function: Shows a success-themed toast. Accepts a string message or object with title/message/icon properties.
warning function: Shows a warning-themed toast. Accepts a string message or object with title/message/icon properties.
danger function: Shows a danger-themed toast. Accepts a string message or object with title/message/icon properties.