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

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

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	20.26.3	16
frontend-app-communications	20.30.1	1
frontend-app-enterprise-public-catalog	20.29.0	1
frontend-app-gradebook	19.25.4	1
frontend-app-learner-portal-enterprise	20.31.1	1
frontend-app-learner-record	20.32.0	1
frontend-app-learning	20.28.4	1
frontend-lib-content-components	20.32.0	2
prospectus	20.32.3	1

Paragon Design System

Theme

PlaygroundBeta

Toast

Behaviors

Basic Usage

With Button

With Link

Theme Variables (SCSS)#

Props API#

Usage Insights#

Toast

All components (A-Z)

Theme

PlaygroundBeta

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