Paragon Design System

Technical Documentation

npm_version
Changelog
GitHub

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

With Link

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

Contents

Guides

Foundations

Components

Buttonlike
Choreography
Content
Forms
Forms (deprecated)
Hooks
Imagery & Iconography
Layout
Navigation
Overlays
Status & metadata
Table

All components (A-Z)