Toast

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

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, .05) !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.

    Defaultnull
  • closeLabel
    string

    Alt text for the Toast's dismiss button. The recommended use is an i18n value. The default is an English string.

    Default'Close'
  • delay
    number

    Time in milliseconds for which the Toast will display.

    Default5000