Docs Menu
Docs/Guides/Toasts Overview & Configuration
Updated October 2026

Toasts Overview & Configuration

Learn how to trigger, configure, and customize non-intrusive toast notifications with Apple-style frosted glass aesthetics.

toastory toasts deliver non-intrusive feedback designed with Apple-style frosted glass aesthetics and polite live regions.

Semantic Types

toastory provides five standard semantic helper functions on the toast object:

typescript

// 1. Neutral Message toast('Changes auto-saved');

// 2. Success toast.success('Project deployed', { description: 'Live on edge in 340ms' });

// 3. Error toast.error('Network timeout', { description: 'Failed to reach cluster node' });

// 4. Warning toast.warning('Storage limit near', { description: '92% of quota consumed' });

// 5. Info toast.info('New version available', { description: 'Update to v0.1.1' });

// 6. Loading Spinner const id = toast.loading('Exporting analytics archive...'); `

---

Interactive Actions & Buttons

Every toast supports primary actions and secondary cancel callbacks with accessible keyboard navigation:

typescript
toast.error('Failed to sync changes', {
  description: 'Conflict detected on branch main.',
  action: {
    label: 'Resolve Conflict',
    onClick: () => router.push('/conflicts'),
  },
  cancel: {
    label: 'Discard',
    onClick: () => revertLocalChanges(),
  },
  closeButton: true,
});

Want to test these options live?

Launch the interactive playground to experiment with themes, positions, and live generators.

Open in Playground →