Toasts

Toasts are popup messages that inform the user of a status change in the system. They can be used to alert the user of something or just as a subtle message of some action or event.

With this demo, we have one button that will make a 'Countdown Toast' with a randomized countdown amount and another button to create a 'Request Toast' which will only dissappear when the user clicks the close button.

Create Countdown Toast

Create Request (close) Toast

const handleCreateCountdownToastClicked = () => {
  const countdownLength = 10 + Math.round(Math.random() * 10);
  const toastDescription: ToastDescription = {
    title: "Alert",
    description: "Something has happened.",
    toastItemOptions: {
      countdownLength: countdownLength,
      destroyTrigger: "countdown",
    },
  };
  toastAdapter.Add(toastDescription);
};

const handleCreateRequestToastClicked = () => {
  const toastDescription: ToastDescription = {
    title: "Alert",
    description: "Something has happened.",
    toastItemOptions: {
      destroyTrigger: "request",
    },
  };
  toastAdapter.Add(toastDescription);
};

<Button onClick={handleCreateCountdownToastClicked}>
  Create Countdown Toast
</Button>
<Button onClick={handleCreateRequestToastClicked}>
  Create Request (close) Toast
</Button>

<Toast toastAdapter={toastAdapter} />