Toasts

Short messages about the result of an action, shown at the edge of the screen. Pick a toast for news that may pass, such as "Saved". Results that must stay belong in an Alert. useToast() shows one from anywhere under the provider, and container renders the stack inside a themed panel.

ToastProvider
ToastViewport
useToast

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, Toasts

Dark theme, Toasts

High contrast theme, Toasts

See it in actionLink to the section See it in action

Toasts in three tones, each with an icon and a word as well as a colour.

UsageLink to the section Usage

tsx

import { ToastProvider, ToastViewport, useToast } from '@skribly/ui/feedback'

tsx

<ToastProvider>
  <App />
  <ToastViewport toneLabels={toneLabels} closeLabel="Close" regionLabel="Notifications" />
</ToastProvider>

const toast = useToast()
toast.success('Changes saved')
toast.error('Could not publish', { description: 'Try again in a minute.' })

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

The stack is a landmark named by regionLabel; F6 moves focus into it, and Tab moves through the toasts.
Each new toast is read once: success and information through a polite live region, errors through an assertive one.
Success and information close after 6 seconds or more, never less than 5; warnings, errors and toasts with an action stay until closed.
Timers pause while the pointer or focus is on the stack.
Escape or the close button closes a toast, and focus returns where it was.
On narrow screens the stack spans the width.

This demo runs through axe in all three themes on every test run. See what the tests check.