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 and Vue, there is the useToastManager() hook (a composable in Vue). All expose the addMessage() method, which needs to be called with a parameter that has the following structure:

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

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="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<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>