Theme

npm_versionnpm Paragon package page

Toast is a pop-up style message that shows the user a brief, fleeting, dismissible message about a successful app process.

Toasts sit fixed to the bottom left of the window.

Behaviors

  • Auto-dismiss: Toast automatically dismisses after 5 seconds by default.
  • Disable timer: On hover of the Toast container. On hover or focus of dismiss icon or optional button
  • Re-enable timer: On mouse leave of the Toast container. On blur of dismiss icon or option button
  • Auto-dismiss timer: 5 - 15 second range.

Basic Usage

Any Paragon component or export may be added to the code example.

With Button

Any Paragon component or export may be added to the code example.

Any Paragon component or export may be added to the code example.

Theme Variables (SCSS)#

$toast-max-width: 400px !default;
$toast-padding-x: .75rem !default;
$toast-padding-y: .25rem !default;
$toast-font-size: .875rem !default;
$toast-color: null !default;
$toast-background-color: $gray-700 !default;
$toast-border-width: 1px !default;
$toast-border-color: rgba(0, 0, 0, .1) !default;
$toast-border-radius: .25rem !default;
$toast-box-shadow: 0 1.25rem 2.5rem rgba($black, .15), 0 .5rem 3rem rgba($black, .15) !default;
$toast-header-color: $white !default;
$toast-header-background-color: $gray-700 !default;
$toast-header-border-color: rgba(0, 0, 0, .5) !default;
$toast-container-gutter-lg: 1.25rem !default;
$toast-container-gutter-sm: .625rem !default;

Props API#

Toast Props API

This is a pass through component from React-Bootstrap, see original props documentation here.

  • children string Required

    A string or an element that is rendered inside the main body of the Toast.

  • onClose func Required

    A function that is called on close. It can be used to perform actions upon closing of the Toast, such as setting the "show" element to false.

  • show bool Required

    Boolean used to control whether the Toast shows

  • action shape {
    label: string Required,
    href: string,
    onClick: func,
    }

    Fields used to build optional action button. label is a string rendered inside the button. href is a link that will render the action button as an anchor tag. onClick is a function that is called when the button is clicked.

    Defaultnull
  • closeLabel string

    Alt text for the Toast's dismiss button. Defaults to 'Close'.

  • delay number

    Time in milliseconds for which the Toast will display.

    Default5000
  • className string

    Class names for the BaseToast component

Usage Insights#

Toast

Project NameParagon VersionInstance Count
frontend-app-admin-portal21.13.126
frontend-app-communications22.7.01
frontend-app-course-authoring22.8.15
frontend-app-enterprise-public-catalog21.13.11
frontend-app-gradebook22.8.11
frontend-app-learner-portal-enterprise21.13.11
frontend-app-learner-record22.9.01
frontend-app-learning22.8.11
frontend-app-support-tools21.13.13