Porsche Design System

Toast

The p-toast component manages both, the queue and display of toast messages. Therefore, you can only have a single instance of this component within your application. Its messages are rendered on the #top-layer which ensures the element to be on top of the page, independent of where p-toast is placed in the DOM hierarchy (z-index is not relevant anymore and won't have any effect).

Review the notification decision tree to determine which notification component is best for a particular scenario.

Queuing messages on p-toast component happens via its addMessage() method. For Angular users, we offer the injectable ToastManager service, for React, there is the useToastManager() hook. Both expose the addMessage() method, which needs to be called with a parameter that has the following structure:

type ToastMessage = {
  text: string;
  state?: 'info' | 'success';
};

The bottom position of the p-toast can be adjusted via the --p-toast-position-bottom CSS variable.

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<button type="button">Queue Toast</button>
<p-toast></p-toast>
<script>
  const toast = document.querySelector('p-toast');
  let counter = 1;

  customElements.whenDefined('p-toast').then(() => {
    document.querySelector('button').addEventListener('click', () => {
      toast.addMessage({ text: `Some message ${counter}`, state: 'success' });
      counter++;
    });
  });
</script>
</body>
</html>