Toast

Atomshadcn/ui, restyled with tokens

A short message about something that just happened, which goes away on its own.

components/atoms/toaster.tsx (Toaster, mounted in app/layout.tsx) + toast() from sonner
Use it for
Confirming an action: saved, sent, copied. Undo.
Not for
Errors the person must fix (put them by the field) or anything they must not miss.

States

Try each kindToasts appear bottom right

Usage

import { toast } from 'sonner';

toast.success('Resend success!', {
  description: 'We have sent the verification link to tony@stark.com',
});
toast.error('Could not send');
toast('Feedback archived', { action: { label: 'Undo', onClick: restore } });

Props

Toast props
PropTypeDefaultDescription
toast(message, options)toast | .success | .error | .warning | .info | .promise—Raise one from any client code. No provider or hook.
options.descriptionReactNode—A second line under the title.
options.action{ label, onClick }—One button, for Undo or View.
options.durationnumber4000Milliseconds before it closes.
<Toaster position>'bottom-right' | 'top-center' | …'bottom-right'Set once, in the root layout.

Accessibility

  • Announced politely by a live region; it does not take focus.
  • Hovering or focusing pauses the timer; it can be swiped away.