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.


  • 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

With Button

Theme Variables (SCSS)#

// Toasts
$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;
Toast Props API
  • 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.

  • closeLabel string

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

  • delay number

    Time in milliseconds for which the Toast will display.

  • className string

    Class names for the BaseToast component