Toast

Lightweight notification toasts powered by Sonner. Add the Toaster provider once, then call toast() anywhere.

Setup

Add <Toaster /> once in your root layout. All calls to toast() anywhere in your app will render there.

// app/layout.tsx
import { Toaster } from '@/components/ui/toast/toast';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  );
}

Each toast type receives a distinct color treatment: a subtle intent-colored background with a left accent border. This makes it easy to distinguish success, error, warning, and info toasts at a glance.

With Description

With Action

Installation

npx visor add toast

This copies two files into your project:

components/ui/toast/toast.tsx — the component
components/ui/toast/toast.module.css — the styles

Usage

import { toast } from '@/components/ui/toast/toast';

// Basic
toast('Event created');

// With type
toast.success('Changes saved');
toast.error('Something went wrong');
toast.warning('Storage almost full');
toast.info('New update available');

// With description
toast('File uploaded', {
  description: 'report-q4-2025.pdf was saved to your documents.',
});

// With action
toast('Message sent', {
  action: {
    label: 'Undo',
    onClick: () => toast('Message unsent'),
  },
});

API Reference

ToastProps (Toaster)

Prop	Type	Default	Description
`position`	`'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right'`	`'bottom-right'`	Where toasts appear on screen.
`duration`	`number`	`4000`	Default duration in milliseconds before a toast auto-dismisses.
`richColors`	`boolean`	`false`	Enables colored backgrounds for different toast types.

The <Toaster /> component accepts all Sonner Toaster props.

Sub-components

Component	Element	Purpose
`Toaster`	`<ol>` (Sonner)	Provider component rendering the toast container; add once in root layout
`toast`	— (function)	Imperative API for triggering toasts (`toast()`, `toast.success()`, `toast.error()`, etc.)

toast() API

The toast() function is re-exported directly from Sonner. All Sonner toast options are available:

toast(message, {
  description?: string;      // Subtitle text
  duration?: number;         // Override auto-dismiss duration (ms)
  action?: { label: string; onClick: () => void };
  cancel?: { label: string; onClick: () => void };
  onDismiss?: (t) => void;
  onAutoClose?: (t) => void;
  id?: string | number;      // Deduplicate or update existing toasts
});

Accessibility

Toasts render in a <ol> with aria-live set to polite (default) or assertive for errors.
Each toast has role="status" for informational messages.
The <Toaster /> is positioned outside the main document flow so it does not disrupt reading order.
Toasts auto-dismiss after 4 seconds by default — ensure any critical information is also conveyed inline, not only via toast.
Respect prefers-reduced-motion: Sonner reduces animation when the OS setting is active.

Color Signal

Typed toasts (toast.success(), toast.error(), toast.warning(), toast.info()) automatically receive semantic color styling via CSS custom properties. The color treatment adapts to the active theme — no configuration needed.

Type	Background	Accent Border
`success`	`--surface-success-subtle`	`--border-success`
`error`	`--surface-error-subtle`	`--border-error`
`warning`	`--surface-warning-subtle`	`--border-warning`
`info`	`--surface-info-subtle`	`--border-info`

Default (untyped) toasts retain the neutral surface style.

Customization

After copying the component, common customizations include:

// Custom position and duration
<Toaster position="top-center" duration={6000} />

// Limit visible toasts
<Toaster visibleToasts={3} />