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.

Build docs developers (and LLMs) love

Get started for freeTalk to us