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:                rgb(0 0 0 / 10%) !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:         rgb(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.

    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

Contents

Guides

Foundations

PlaygroundBeta

  • A drag-and-drop UI builder for prototyping with Paragon components.

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)