Toasts JS Enhanced

Temporary notification messages with auto-dismiss, icons, progress bars, and flexible positioning. Use the simple JavaScript API - just one line of code!

Simple One-Line API

Show toast notifications with Toast.show({ type: 'success', message: 'Saved!' }). Supports icons, progress bars, and 6 positioning options out of the box!

Basic Toast

Simple toast notification with icon, title, and message.

Notification

This is a basic toast notification message.

HTML

<div class="focus-toast">
  <i class="focus-toast-icon fa fa-info-circle"></i>
  <div class="focus-toast-content">
    <div class="focus-toast-title">Notification</div>
    <div class="focus-toast-message">This is a toast message.</div>
  </div>
  <button class="focus-toast-close">×</button>
</div>

Toast Variants

Contextual color variants for different notification types.

Success!

Your changes have been saved successfully.

Error!

An error occurred while processing your request.

Warning!

Please review your input before continuing.

Info

New updates are available for your application.

HTML

<div class="focus-toast focus-toast-success">
  <i class="focus-toast-icon fa fa-check-circle"></i>
  <div class="focus-toast-content">
    <div class="focus-toast-title">Success!</div>
    <div class="focus-toast-message">Your changes have been saved.</div>
  </div>
  <button class="focus-toast-close">×</button>
</div>

<div class="focus-toast focus-toast-danger">...</div>
<div class="focus-toast focus-toast-warning">...</div>
<div class="focus-toast focus-toast-info">...</div>

Positioning

Control toast position using container classes. Toasts appear in a container that determines their position.

HTML

<!-- Top Right (default) -->
<div class="focus-toast-container">
  <div class="focus-toast">...</div>
</div>

<!-- Bottom Right -->
<div class="focus-toast-container focus-toast-container-bottom-right">
  <div class="focus-toast">...</div>
</div>

<!-- Bottom Left -->
<div class="focus-toast-container focus-toast-container-bottom-left">
  <div class="focus-toast">...</div>
</div>

<!-- Top Left -->
<div class="focus-toast-container focus-toast-container-top-left">
  <div class="focus-toast">...</div>
</div>

<!-- Top Center -->
<div class="focus-toast-container focus-toast-container-top-center">
  <div class="focus-toast">...</div>
</div>

<!-- Bottom Center -->
<div class="focus-toast-container focus-toast-container-bottom-center">
  <div class="focus-toast">...</div>
</div>

Toast with Progress Bar

Add a progress bar to indicate auto-dismiss timing.

Download Started

Your file is being downloaded...

HTML

<div class="focus-toast focus-toast-primary">
  <i class="focus-toast-icon fa fa-download"></i>
  <div class="focus-toast-content">
    <div class="focus-toast-title">Download Started</div>
    <div class="focus-toast-message">Your file is being downloaded...</div>
  </div>
  <button class="focus-toast-close">×</button>
  <div class="focus-toast-progress">
    <div class="focus-toast-progress-bar" style="animation-duration: 5s;"></div>
  </div>
</div>

JavaScript API

Simple One-Line API

Show toast notifications with a single function call. Icons, progress bars, and all positioning options are built-in!

Use the Toast.show() API to create toast notifications programmatically:

JavaScript

// Basic toast with icon
Toast.show({
  type: 'success',
  title: 'Success!',
  message: 'Your changes have been saved.'
})

// With custom position
Toast.show({
  type: 'info',
  message: 'Notification',
  position: 'bottom-right'
})

// With progress bar
Toast.show({
  type: 'primary',
  title: 'Download Started',
  message: 'Your file is being downloaded...',
  progress: true,
  duration: 5000
})

// No auto-dismiss
Toast.show({
  type: 'danger',
  message: 'Critical error',
  duration: 0  // Stays until manually closed
})

// Custom icon
Toast.show({
  type: 'info',
  message: 'Custom icon example',
  icon: 'fa-rocket'
})

// No icon
Toast.show({
  type: 'warning',
  message: 'No icon example',
  icon: false
})

Complete API Reference

Toast.show(config)

Show a toast notification with full customization options.

Toast.show({
  type: 'info',                    // 'info', 'success', 'warning', 'danger', 'primary'
  title: '',                       // Optional title
  message: '',                     // Message text
  duration: 5000,                  // Auto-dismiss after ms (0 = no auto-dismiss)
  position: 'top-right',           // See positions below
  icon: true,                      // true (auto), false (none), or custom class
  progress: false                  // Show progress bar
})

Returns: Toast element (can be used with Toast.close())

Available Positions

'top-right' - Top right corner (default)
'top-left' - Top left corner
'top-center' - Top center
'bottom-right' - Bottom right corner
'bottom-left' - Bottom left corner
'bottom-center' - Bottom center

Toast.close(toast)

Manually close a toast.

const toast = Toast.show({ message: 'Hello' })
Toast.close(toast)

CSS Classes Reference

Class	Description
`.focus-toast-container`	Toast container (top-right by default)
`.focus-toast-container-bottom-right`	Bottom-right positioning
`.focus-toast-container-bottom-left`	Bottom-left positioning
`.focus-toast-container-top-left`	Top-left positioning
`.focus-toast-container-top-center`	Top-center positioning
`.focus-toast-container-bottom-center`	Bottom-center positioning
`.focus-toast`	Individual toast element
`.focus-toast-success`	Success variant
`.focus-toast-danger`	Danger variant
`.focus-toast-warning`	Warning variant
`.focus-toast-info`	Info variant
`.focus-toast-primary`	Primary variant
`.focus-toast-icon`	Toast icon element
`.focus-toast-content`	Toast content container
`.focus-toast-title`	Toast title
`.focus-toast-message`	Toast message text
`.focus-toast-close`	Close button
`.focus-toast-progress`	Progress bar container
`.focus-toast-progress-bar`	Progress bar element
`.focus-toast-exit`	Exit animation class