Skip to content

toast-notification-types

A toast notification is a non-blocking, informational message used in web interfaces to provide feedback to users.^[600-developer__frontend__js-plugin__js-plugin.md]

In the context of the toastr JavaScript library, toast notifications can be displayed in several predefined types to indicate the nature of the event or message.^[600-developer__frontend__js-plugin__js-plugin.md]

Types

The toastr library provides the following primary methods for triggering different types of notifications:

  • Success: Indicates a successful operation or action.^[600-developer__frontend__js-plugin__js-plugin.md]
  • Warning: Indicates a warning or cautionary message.^[600-developer__frontend__js-plugin__js-plugin.md]
  • Error: Indicates an error or failure state.^[600-developer__frontend__js-plugin__js-plugin.md]

Configuration

The behavior and appearance of these notifications are managed through a global options object.^[600-developer__frontend__js-plugin__js-plugin.md] Key configurable parameters include:

  • positionClass: Determines the on-screen location of the toast (e.g., "toast-bottom-left").^[600-developer__frontend__js-plugin__js-plugin.md]
  • closeButton: Boolean to toggle the visibility of a close button.^[600-developer__frontend__js-plugin__js-plugin.md]
  • progressBar: Boolean to show or hide a visual progress bar indicating the time remaining.^[600-developer__frontend__js-plugin__js-plugin.md]
  • preventDuplicates: Boolean to control whether duplicate messages should be hidden.^[600-developer__frontend__js-plugin__js-plugin.md]

Interaction and Timing

Notification lifecycles can be controlled via specific duration settings. The timeOut option defines the duration in milliseconds before the notification automatically disappears^[600-developer__frontend__js-plugin__js-plugin.md]. Additionally, extendedTimeOut specifies a different duration limit that applies if the user hovers over or interacts with the toast^[600-developer__frontend__js-plugin__js-plugin.md]. Animation styles for showing and hiding (e.g., fadeIn/fadeOut) are also configurable^[600-developer__frontend__js-plugin__js-plugin.md].

Sources

^[600-developer__frontend__js-plugin__js-plugin.md]