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.