overlay

Toast

Stacked notifications driven by a hook, with pause-on-hover and a swipe-to-dismiss region.

Tones and actions

Hover a toast to pause its timer. `duration: Infinity` keeps one up until it is acted on.

Updating in place

Pass the id you got back to replace a toast instead of stacking another.

Own the source

Noksha ships as a package and as copy-paste source. Take the files and they are yours to change. These are read from the generated registry, so they are exactly what the library ships — never a paraphrase of it.

Take these files, and internal helpers along with them — the imports below point at them. Or let the CLI do it: npx @noksha-ui/cli add toast writes them, follows the same dependency graph, and fixes up the imports.

export { ToastProvider, toastVariants, useToast } from './toast.js';
export type {
  ToastApi,
  ToastOptions,
  ToastPosition,
  ToastProviderProps,
  ToastRecord,
  ToastTone,
} from './toast.types.js';

API reference

Accepted values

ToastPosition: top-lefttop-centertop-rightbottom-leftbottom-centerbottom-right

ToastOptions

Prop	Type	Description
title	React.ReactNode	—
description	React.ReactNode	—
tone	ToastTone	—
duration	number	How long before it dismisses itself. `Infinity` keeps it until acted on.
action	React.ReactNode	A single action. More than one belongs in a dialog, not a toast.
id	string	Reuse an id to replace a toast in place — a "saving" that becomes "saved".
onDismiss	() => void	—

ToastRecord

Also accepts everything from ToastOptions.

Prop	Type	Description
id*	string	—
open*	boolean	—

ToastProviderProps

Prop	Type	Description
children	React.ReactNode	—
position	ToastPosition	—
duration	number	Default lifetime, in ms.
max	number	How many are shown at once. Older ones are dropped. A stack that grows without limit stops being a notification and becomes a wall the user has to dismiss their way through.
container	Element \| null	Where the viewport is portalled to.
label	string	Accessible name for the notification region.

ToastApi

Prop	Type	Description
toast*	(options: ToastOptions) => string	Shows a toast and returns its id.
dismiss*	(id: string) => void	—
dismissAll*	() => void	—
toasts*	ToastRecord[]	—

Examples