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.
With Link
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#
This is a pass through component from React-Bootstrap, see original props documentation here.
- children
string
RequiredA string or an element that is rendered inside the main body of the
Toast
. - onClose
func
RequiredA 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
RequiredBoolean used to control whether the
Toast
shows - action
shape
{label:string
Required,href:string
,onClick:}func
,DefaultnullFields 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
Default5000Time in milliseconds for which the
Toast
will display. - className
string
Class names for the
BaseToast
component
Usage Insights#
Toast
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-admin-portal | 21.13.1 | 26 | |
frontend-app-communications | 22.7.0 | 1 | |
frontend-app-course-authoring | 22.8.1 | 5 | |
frontend-app-enterprise-public-catalog | 21.13.1 | 1 | |
frontend-app-gradebook | 22.8.1 | 1 | |
frontend-app-learner-portal-enterprise | 21.13.1 | 1 | |
frontend-app-learner-record | 22.9.0 | 1 | |
frontend-app-learning | 22.8.1 | 1 | |
frontend-app-support-tools | 21.13.1 | 3 |