Comprehensive listing of every feature shipping in the toastory npm package. Every item includes runnable browser demos, TypeScript syntax snippets, and direct links to full documentation.
Pre-configured semantic types: success, error, warning, info, loading, and neutral cards with custom icons and rich tones.
toast.success('Project deployed!', {
description: 'Live on production edge in 340ms.',
richColors: true
});Streamline async operations with automated loading indicators, success/error transitions, and unwrap() error rejection.
toast.promise(fetchDatabaseStats(), {
loading: 'Gathering cluster telemetry...',
success: 'Cluster healthy across 12 zones',
error: 'Failed to reach database replica'
});Programmatically mutate active toast content, progress, or duration on the fly with toast.update(id, patch).
const id = toast.loading('Uploading 14.8 MB assets...');
setTimeout(() => {
toast.update(id, {
type: 'success',
title: 'Upload complete!',
description: 'Saved to encrypted S3 bucket.'
});
}, 2000);Attach primary action and cancellation buttons with keyboard focus rings, callbacks, and automatic dismiss.
toast('File moved to trash', {
description: 'analytics_2026.parquet',
action: { label: 'Undo', onClick: () => restoreFile() },
cancel: { label: 'Dismiss' }
});Fluid touch & mouse swipe physics with customizable drag threshold and velocity snap dismissal in any direction.
toast.info('Swipe me away!', {
swipeDirections: ['left', 'right', 'up', 'down'],
dragThreshold: 40
});Visual feedback for long-running operations with linear percentage bars or circular radial progress rings.
toast.loading('Compiling kernel...', {
progress: true,
duration: 5000
});Timers automatically freeze when hovering, focusing elements, or switching browser tabs to avoid missed notifications.
toast('Hover to pause countdown', {
pauseOn: ['hover', 'focus', 'hidden'],
duration: 6000
});Register domain-specific toast variants with distinct brand colors, custom icons, and preset defaults.
ui.toast.types.add('backup', {
color: '#8b5cf6',
ariaLive: 'polite',
duration: 5000
});Promise-based modal dialog with focus trapping, tone presets (info, warning, danger), Esc key listener, and backdrop click control.
const { isConfirmed } = await ui.confirm({
title: 'Delete billing method?',
text: 'Your current subscriptions will default to wire transfer.',
tone: 'danger',
confirmButton: { label: 'Remove Card' }
});High-contrast accessible modal dialog for critical announcements, system notices, and policy agreements.
await ui.alert({
title: 'Scheduled Maintenance',
text: 'API gateway will restart on Sunday at 02:00 UTC.',
tone: 'info',
confirmButton: { label: 'Acknowledge' }
});Keep the modal open and display an animated spinner inside the confirm button until an async API call resolves or rejects.
await ui.confirm({
title: 'Deploy to Production?',
preConfirm: async () => {
await triggerPipelineDeploy();
}
});Users can freely drag modal dialogs around the screen, or position them across 15 coordinates (top, center, bottom, corners).
await ui.alert({
title: 'Draggable Inspector',
text: 'Grab the modal header to reposition it anywhere.',
draggable: true
});Attach auto-dismiss countdown timers with live animated progress bars and programmatic handle controllers.
await ui.confirm({
title: 'Session Expiring',
text: 'Automatically logging out in 5 seconds...',
timer: 5000,
timerProgressBar: true
});Native input renderers: text, email, password, number, tel, url, search, textarea, select, radio, checkbox, range, date, time, file.
const { value } = await ui.prompt({
title: 'Select Deployment Region',
input: 'select',
options: { 'us-east': 'US East (N. Virginia)', 'eu-west': 'EU West (Ireland)' }
});Enforce input rules with inline validation messages, regex patterns, or async server availability checks.
await ui.prompt({
title: 'Claim Username',
input: 'text',
validate: async (val) => {
if (!val || val.length < 3) return 'At least 3 characters required';
if (await isTaken(val)) return 'Username already registered';
}
});Eliminate accidental destructive actions by requiring the user to type a specific verification keyword.
await ui.prompt({
title: 'Confirm Repository Wipe',
text: 'Type "RESET" to confirm permanent deletion:',
confirmText: 'RESET',
caseSensitive: true,
tone: 'danger'
});Individual auto-advancing verification cells with clipboard paste parsing, numeric keypad mode, and resend cooldown timer.
await ui.prompt({
title: 'Enter Verification Code',
input: 'otp',
otpLength: 6,
resendCooldown: 30
});Assemble multi-page onboarding wizards with Back and Next navigation, per-step validation, and accumulated return values.
const { values } = await ui.steps([
{ title: 'Step 1: Workspace', input: 'text' },
{ title: 'Step 2: Plan', input: 'select', options: ['Pro', 'Enterprise'] }
]);Slide-up modal sheet with touch drag handle, velocity snap points (e.g. 40vh, 85vh), and fluid swipe dismissal.
ui.bottomSheet({
title: 'Deployment Options',
snapPoints: [0.4, 0.85],
confirmButton: { label: 'Apply Settings' }
});Stacked iOS-inspired action list with destructive option highlighting, neutral secondary items, and cancellation button.
ui.sheet({
title: 'Document Actions',
actions: [
{ label: 'Copy Public URL', value: 'copy' },
{ label: 'Export as PDF', value: 'pdf' },
{ label: 'Delete File', value: 'delete', style: 'destructive' }
]
});Modal loading backdrop with smooth spinner, dynamic percentage progress, and programmatic handle controller.
const handle = ui.loading({ text: 'Deploying worker...' });
handle.update({ progress: 0.6, text: 'Warming cache...' });
setTimeout(() => handle.close(), 2000);Specular frosted glass (ios-glass, liquid-glass, aurora), retro brutalism, and clean flat styles with light & dark modes.
import 'toastory/themes/ios-glass.css';
ui.configure({ theme: 'ios-glass', mode: 'auto' });Define default themes, 6 screen placements, 3D deck stacking, pause triggers, and hotkeys in one call.
ui.configure({
theme: 'ios-glass',
position: 'top-right',
stack: 'stacked',
duration: 4000,
maxVisible: 5,
gap: 12
});Strict 0 runtime dependencies in published bundle. < 6 KB gzip core + toast. 100% passed contrast checks & focus traps.
// Zero runtime dependencies. Runs in plain Node, SSR, and browsers.
import { ui } from 'toastory';