Promise Toasts
Handle async operations with auto-transitioning loading, success, and error states, plus promise unwrapping.
When performing network requests, file uploads, or database mutations, ui.toast.promise() provides seamless status indicators that automatically transition based on the resolution or rejection of a JavaScript Promise.
const handle = toast.promise(
api.deployCluster({ region: 'us-east' }),
{
loading: 'Deploying edge cluster pods...',
success: (data) => Cluster ${data.clusterId} is live!,
error: (err) => Deployment failed: ${(err as Error).message},
description: 'Syncing worker configurations across 12 zones.',
finally: () => refreshDashboard(),
}
);
// Access the underlying return value directly:
const cluster = await handle.unwrap();
console.log('Deployed cluster IP:', cluster.ip);
`
Want to test these options live?
Launch the interactive playground to experiment with themes, positions, and live generators.