Skip to main content
Show toast notifications with ot.toast(message, title?, options?). Toasts appear temporarily to provide feedback without interrupting the user’s workflow.

​
Basic Usage

<button onclick="ot.toast('Action completed successfully', 'All good', { variant: 'success' })">
  Show Success
</button>

​
JavaScript API

​
Basic Method

ot.toast(message, title?, options?)
Parameters:
  • message (string) - The toast message content
  • title (string, optional) - The toast title
  • options (object, optional) - Configuration options
Example: 
ot.toast('Changes saved successfully', 'Success', {
  variant: 'success',
  placement: 'top-right',
  duration: 4000
});

​
Options

OptionTypeDefaultDescription
variantstring'''success', 'danger', or 'warning'
placementstring'top-right'Position on screen (see placements below)
durationnumber4000Auto-dismiss time in milliseconds (0 = never)

​
Placement

Toasts can be positioned in 6 different locations: 
ot.toast('Top left', '', { placement: 'top-left' })
ot.toast('Top center', '', { placement: 'top-center' })
ot.toast('Top right', '', { placement: 'top-right' })      // default
ot.toast('Bottom left', '', { placement: 'bottom-left' })
ot.toast('Bottom center', '', { placement: 'bottom-center' })
ot.toast('Bottom right', '', { placement: 'bottom-right' })
Toasts stack vertically at each placement. Bottom placements show newest toasts at the bottom.

​
Custom HTML Content

Use ot.toast.el(element, options?) to show toasts with custom HTML content.

​
From a Template

<template id="undo-toast">
  <output class="toast" data-variant="success">
    <h6 class="toast-title">Changes saved</h6>
    <p>Your document has been updated.</p>
    <button data-variant="secondary" class="small" onclick="this.closest('.toast').remove()">
      Okay
    </button>
  </output>
</template>

<button onclick="ot.toast.el(document.querySelector('#undo-toast'), { duration: 8000 })">
  Toast with action
</button>

​
Dynamic Element

const el = document.createElement('output');
el.className = 'toast';
el.setAttribute('data-variant', 'warning');
el.innerHTML = '<h6 class="toast-title">Warning</h6><p>Custom content here</p>';
ot.toast.el(el);
The element is cloned before display, so templates can be reused multiple times.

​
Clearing Toasts

Clear all toasts or toasts at a specific placement: 
ot.toast.clear()              // Clear all toasts
ot.toast.clear('top-right')   // Clear toasts at specific placement

​
Variants

​
Success

Green accent color for successful operations: 
ot.toast('Operation completed', 'Success', { variant: 'success' });

​
Danger

Red accent color for errors: 
ot.toast('Failed to save', 'Error', { variant: 'danger' });

​
Warning

Yellow/orange accent color for warnings: 
ot.toast('Low storage space', 'Warning', { variant: 'warning' });

​
Styling

Toasts include:
  • Card-style background with subtle shadow
  • Color-coded left border based on variant
  • Smooth enter/exit animations
  • Responsive max-width (28rem) and min-width (20rem)
  • Auto-stacking with proper spacing

​
Accessibility

Toasts use role="status" or role="alert" for screen reader announcements. The close button includes proper ARIA attributes for keyboard navigation.
For full API documentation including advanced usage and events, see the Toast API reference.