Toast

Status

Stable

Accessibility

Reviewed

Package

tenet-ui@0.5.0

Source

Toast.tsx

Import

import { Toast, useToast } from 'tenet-ui';

Usage guidelines

When to use: brief, transient, non-blocking feedback about something that just happened (“Saved”, “Copied”, “Upload failed”). For a message anchored to content use Banner; for something that must be acknowledged use Dialog.

Setup

• Wrap your app once in <ToastProvider> (optionally set duration and placement). Call const { toast } = useToast() anywhere beneath it.

Rules

• Keep it short — a title plus one line of message. Toasts are glanceable, not a place for forms or long text.
• Pick variant by meaning; danger is announced assertively (role="alert"), the rest politely (role="status"). The viewport is a labelled live region.
• Let them auto-dismiss (default 5s); only set duration: 0 for a message the user must dismiss, and always keep the manual dismiss button.
• Never put critical, must-act information only in a toast — it disappears. Mirror it in a Banner or inline error.
• Don’t stack many at once; collapse repeats rather than flooding the corner.

Do / Don’t

• ✅ toast({ variant: 'success', title: 'Saved', message: 'Your changes are live.' })
• ✅ <ToastProvider placement="bottom-right"><App /></ToastProvider>
• ❌ A toast as the only record of a validation error the user must fix.
• ❌ Long, interactive content inside a toast — use a Dialog.

See also: Banner for persistent or anchored messages, Dialog for decisions, FormControl.Validation for field errors; system guideline feedback has the decision table.

Examples

1 story for Toast, open in Storybook

• Default components-toast--default

The full matrix (all args, controls, accessibility panel) is in Storybook.

Props

Toast

Prop	Type	Default	Description
duration	number	5000	Default auto-dismiss duration (ms) when an individual toast doesn't set one.
placement	'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'	bottom-right	Viewport corner.
children	ReactNode	None

ToastProvider

Prop	Type	Default	Description
duration	number	5000	Default auto-dismiss duration (ms) when an individual toast doesn't set one.
placement	'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'	bottom-right	Viewport corner.
children	ReactNode	None

useToast hook

Prop	Type	Default	Description
toast *	(options: ToastOptions) => string	None	Show a toast; returns its id.
dismiss *	(id: string) => void	None	Dismiss a toast by id.

* required

Related types

ToastOptions

Member	Type	Default	Description
variant	'info' | 'success' | 'warning' | 'danger'	None	Semantic tone.
title	ReactNode	None	Optional bold lead-in line.
message *	ReactNode	None	Main message.
duration	number	None	Auto-dismiss after N ms. 0 keeps it until dismissed.

ToastEntry

Member	Type	Default	Description
variant	'info' | 'success' | 'warning' | 'danger'	None	Semantic tone.
title	ReactNode	None	Optional bold lead-in line.
message *	ReactNode	None	Main message.
duration	number	None	Auto-dismiss after N ms. 0 keeps it until dismissed.
id *	string	None

Related components

• Banner
• Dialog
• Spinner