Toaster

Shows Toasts in the bottom-right corner of the screen: newest nearest the edge, at most three, hiding on their own after 5 seconds (Danger stays).

Toast title
This is a toast notification message.

Usage

Import the component and render it.

import { Toaster } from 'src/components/Toaster/Toaster';

<Toaster
  toasts={[{"id":"one-1","type":"success","title":"Toast title","description":"This is a toast notification message.","actionLabel":"Action"}]}
  label="Notifications"
/>

Accessibility

Role: region named "Notifications" with a polite live list; each Toast is role="alert" (Danger, Warning) or role="status" (Success, Info).

Key	Action
`Tab`	Reaches the Toast Buttons in page order; focus pauses the timer

Success, Info and Warning hide after 5 seconds; the timer pauses while the pointer or keyboard focus is on the toast (WCAG 2.2.1).
Danger stays until dismissed, so errors are not missed.
Do not put the only way to do something in a toast: it can disappear before it is read.

Toasts

Toasts only changes the content: each example passes its own props.

Toast title
This is a toast notification message.

Toast title
This is a toast notification message.
Toast title
This is a toast notification message.

Toast title
This is a toast notification message.
Toast title
This is a toast notification message.
Toast title
This is a toast notification message.

<Toaster toasts={[{"id":"one-1","type":"success","title":"Toast title","description":"This is a toast notification message.","actionLabel":"Action"}]} />
<Toaster toasts={[{"id":"two-1","type":"info","title":"Toast title","description":"This is a toast notification message.","actionLabel":"Action"},{"id":"two-2","type":"success","title":"Toast title","description":"This is a toast notification message.","actionLabel":"Action"}]} />
<Toaster toasts={[{"id":"three-1","type":"warning","title":"Toast title","description":"This is a toast notification message.","actionLabel":"Action"},{"id":"three-2","type":"info","title":"Toast title","description":"This is a toast notification message.","actionLabel":"Action"},{"id":"three-3","type":"success","title":"Toast title","description":"This is a toast notification message.","actionLabel":"Action"}]} />

Composition

Use the following composition to build a Toaster:

Toaster
├── Toast
│   └── Button
└── Button

Toast

A short message about something that just happened, with an optional action. Type sets the status icon and its color. Only used inside Toaster.

Toast title

This is a toast notification message.

Toast

<Toast />

Actions

Pass callbacks to respond to the component.

import { Toaster } from 'src/components/Toaster/Toaster';

<Toaster
  toasts={[{"id":"one-1","type":"success","title":"Toast title","description":"This is a toast notification message.","actionLabel":"Action"}]}
  label="Notifications"
  onDismiss={(id) => console.log(id)}
/>

Callback	When
`onDismiss`	Called when a toast leaves (Dismiss, timeout, or a fourth toast).