Toast

Feedback · src/components/Toast/Toast.tsx

Confirmation that something happened, floating and brief.

For an action that succeeded, and for an undo. Never for something the person must act on: a toast leaves, and anything that can disappear on its own cannot carry a requirement. That belongs in Alert.

aria-live="polite" rather than assertive, so it is announced when the reader pauses instead of cutting across them for news they did not ask to hear twice.

This renders one toast. Stacking, timing and dismissal are the app's, because a component that owned the timer would also have to own pausing it on hover and on focus.

Import

import { Toast } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
tone	Tone
title	React.ReactNode
action	React.ReactNode	An undo, usually. Keep it to one.
closeLabel	string
className	string
children	React.ReactNode
onClose	() => void