Toast

Edit this page Leave feedback

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

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  const [show, setShow] = useState(false);

  return (
    <>
      <Toast
        onClose={() => setShow(false)}
        show={show}
      >
        Example of a basic Toast.
      </Toast>

      <Button variant="primary" onClick={() => setShow(true)}>Show Toast</Button>
    </>
  );
}

() => {
  const [show, setShow] = useState(false);

  return (
    <>
      <Toast
        onClose={() => setShow(false)}
        show={show}
      >
        Example of a basic Toast.
      </Toast>

      <Button variant="primary" onClick={() => setShow(true)}>Show Toast</Button>
    </>
  );
}

With Button

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  const [show, setShow] = useState(false);

  return (
    <>
      <Toast
        action={{
          label: "Optional Button",
          onClick: () => console.log('You clicked the action button.')
        }}
        onClose={() => setShow(false)}
        show={show}
      >
        Success! Example of a Toast with a button.
      </Toast>

      <Button variant="primary" onClick={() => setShow(true)}>Show Toast</Button>
    </>
  );
}

() => {
  const [show, setShow] = useState(false);

  return (
    <>
      <Toast
        action={{
          label: "Optional Button",
          onClick: () => console.log('You clicked the action button.')
        }}
        onClose={() => setShow(false)}
        show={show}
      >
        Success! Example of a Toast with a button.
      </Toast>

      <Button variant="primary" onClick={() => setShow(true)}>Show Toast</Button>
    </>
  );
}

With Link

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  const [show, setShow] = useState(false);

  return (
    <>
      <Toast
        action={{
          label: "Optional Link",
          href: "#"
        }}
        onClose={() => setShow(false)}
        show={show}
      >
        Success! Example of a Toast with a link.
      </Toast>

      <Button variant="primary" onClick={() => setShow(true)}>Show Toast</Button>
    </>
  );
}

() => {
  const [show, setShow] = useState(false);

  return (
    <>
      <Toast
        action={{
          label: "Optional Link",
          href: "#"
        }}
        onClose={() => setShow(false)}
        show={show}
      >
        Success! Example of a Toast with a link.
      </Toast>

      <Button variant="primary" onClick={() => setShow(true)}>Show Toast</Button>
    </>
  );
}

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#

Toast Props API

This is a pass through component from React-Bootstrap, see original props documentation here.

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

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.10.0	1
frontend-app-learning	22.8.1	1
frontend-app-support-tools	21.13.1	3

Edit this page Leave feedback

Paragon Design System

Theme

Toast

Behaviors

Basic Usage

With Button

With Link

Theme Variables (SCSS)#

Props API#

Usage Insights#

Toast

All components (A-Z)

Theme

Toast

Behaviors#

Basic Usage#

With Button#

With Link#

Theme Variables (SCSS)#

Props API#

Usage Insights#

Toast

All components (A-Z)

Behaviors

Basic Usage

With Button

With Link