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:
// 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:
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.