Actions
Add buttons and interactivity to your toasts
Actions & Buttons
Add interactive buttons to your toasts for user actions.
Single Action
toast.warning('File deleted', {
description: 'This can be undone',
actions: [
{
label: 'Undo',
variant: 'primary',
onClick: () => toast.success('File restored!'),
},
],
});
Multiple Actions
toast.info('New version available', {
description: 'v2.0.0 is ready to install',
actions: [
{
label: 'Update Now',
variant: 'primary',
onClick: () => startUpdate(),
},
{
label: 'Later',
variant: 'ghost',
onClick: () => toast.info('Reminder set for later'),
},
],
});
Action Variants Actions come in different styles:
toast({
title: 'Confirm action',
actions: [
{
label: 'Primary',
variant: 'primary', // Solid, high emphasis
onClick: handleConfirm
},
{
label: 'Secondary',
variant: 'secondary', // Outlined, medium emphasis
onClick: handleSecondary
},
{
label: 'Ghost',
variant: 'ghost', // Subtle, low emphasis
onClick: handleCancel
},
],
});
💡
Tip
Use actions to make toasts interactive without disrupting user flow. Perfect for undo, confirm, and quick actions.