Toasts required

Temporary notification messages with auto-dismiss, icons, progress bars, and flexible positioning.

One Line of Code

Toast.show({ type: 'success', message: 'Saved!' }) — that's it! No HTML markup needed. Icons, progress bars, and positioning are all built-in.

Quick Start

Show toast notifications with a single function call.

JavaScript 
// Success toast
Toast.show({ type: 'success', message: 'Changes saved!' })

// Error toast
Toast.show({ type: 'danger', message: 'Something went wrong.' })

// Warning toast
Toast.show({ type: 'warning', message: 'Please check your input.' })

// Info toast
Toast.show({ type: 'info', message: 'New updates available.' })

With Title

Add a title for more detailed notifications.

JavaScript 
Toast.show({
  type: 'success',
  title: 'File Uploaded',
  message: 'document.pdf was uploaded successfully.'
})

Positioning

Control where toasts appear on screen. Default is top-right.

JavaScript 
// Position options
Toast.show({ message: 'Top right (default)', position: 'top-right' })
Toast.show({ message: 'Top left', position: 'top-left' })
Toast.show({ message: 'Top center', position: 'top-center' })
Toast.show({ message: 'Bottom right', position: 'bottom-right' })
Toast.show({ message: 'Bottom left', position: 'bottom-left' })
Toast.show({ message: 'Bottom center', position: 'bottom-center' })

Progress Bar

Show a visual countdown for auto-dismiss timing.

JavaScript 
Toast.show({
  type: 'primary',
  title: 'Uploading...',
  message: 'Please wait while your file uploads.',
  progress: true,
  duration: 5000
})

Duration Control

Control how long toasts stay visible. Set to 0 to disable auto-dismiss.

JavaScript 
// Duration controls how long toast stays visible (in milliseconds)

// Quick toast: 2 seconds auto-dismiss
Toast.show({ message: 'Quick!', duration: 2000 })

// Slow toast: 8 seconds auto-dismiss
Toast.show({ message: 'Taking my time...', duration: 8000 })

// Persistent: stay until user manually closes (duration: 0 disables auto-dismiss)
Toast.show({
  type: 'danger',
  message: 'This stays until you close it.',
  duration: 0  // Set to 0 to disable auto-dismiss
})

Custom Icons

Override the default icon or disable it entirely.

JavaScript 
// Custom icon
Toast.show({
  type: 'info',
  message: 'Rocket launched!',
  icon: 'fa-rocket'
})

// No icon
Toast.show({
  type: 'success',
  message: 'Clean and simple.',
  icon: false
})

JavaScript API

Create and manage toast notifications programmatically.

Show Toast

JavaScript 
Toast.show({ type: 'success', message: 'Changes saved!' })

Toast.show({
  type: 'info',
  title: 'File Uploaded',
  message: 'document.pdf was uploaded successfully.',
  duration: 5000,
  position: 'top-right'
})

Close Toast

JavaScript 
const toast = Toast.show({ message: 'Hello', duration: 0 })

Toast.close(toast)

Methods

Method Returns Description
Toast.show(options) Element Create and show a toast notification
Toast.close(element) void Close a toast with fade-out animation

Options

Option Type Default Description
type string 'info' Toast type: 'info', 'success', 'warning', 'danger', 'primary'
message string '' Toast message text (required)
title string '' Optional title above message
duration number 5000 Auto-dismiss after ms. Use 0 to disable.
position string 'top-right' Position: 'top-right', 'top-left', 'top-center', 'bottom-right', 'bottom-left', 'bottom-center'
icon boolean|string true true = auto icon, false = no icon, or custom class like 'fa-rocket'
progress boolean false Show countdown progress bar

CSS Classes Reference

For advanced customization or CSS-only static toasts.

Show HTML Structure 
<!-- Toast container (positioned fixed) -->
<div class="focus-toast-container focus-toast-container-top-right">

  <!-- Individual toast -->
  <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>
    <!-- Optional progress bar -->
    <div class="focus-toast-progress">
      <div class="focus-toast-progress-bar"></div>
    </div>
  </div>

</div>
Class Description
.focus-toast-container Container element (top-right by default)
.focus-toast-container-{position} Position modifier: top-left, top-center, bottom-right, bottom-left, bottom-center
.focus-toast Individual toast element
.focus-toast-{type} Type variant: success, danger, warning, info, primary
.focus-toast-icon Icon element
.focus-toast-content Content wrapper
.focus-toast-title Title element
.focus-toast-message Message element
.focus-toast-close Close button
.focus-toast-progress Progress bar container
.focus-toast-progress-bar Progress bar element