Sonner (Toast)

An opinionated toast notification component. Toasts are created via JavaScript.

Default

Click the button to show a basic toast notification.

Variants

Toasts come in several variants: success, error, warning, and info.

With Description

Toasts can include a secondary description line.

With Action

Toasts can include an action button.

Custom Duration

Control how long a toast stays visible.

JavaScript API

Toasts are created via the global Proa.Sonner API.

// Basic toast
Proa.Sonner.toast('Hello world');

// Typed variants
Proa.Sonner.success('Saved!');
Proa.Sonner.error('Failed!');
Proa.Sonner.warning('Careful!');
Proa.Sonner.info('FYI...');

// With options
Proa.Sonner.toast('Event created', {
  description: 'Details here',
  duration: 5000,
  action: {
    label: 'Undo',
    onClick: () => console.log('Undo clicked')
  }
});

// Dismiss all
Proa.Sonner.dismissAll();

Open Markdown

ProSonner

Toast notification runtime.

Proa UI Pro component source is proprietary and requires an accepted Proa UI Pro Commercial License Agreement. Subject to that agreement, the self-serve license includes the limited commercial Proa framework rights needed to use Proa UI Pro in closed-source products.

View Pro pricing

Install with the Proa CLIPro access

$ proa ui add sonner

Requires an active Proa UI Pro license and access to the private component registry.

CLI and registry setup