Skip to main content
Action buttons let users take immediate action directly from a toast. Each button can dispatch a custom event, display an icon, use a custom color, and optionally require confirmation before proceeding.

​
Basic example

Add buttons to the expanded toast body: 
toast({
    type: 'success',
    title: 'Message sent',
    actions: [
        { label: 'Undo', icon: 'undo', event: 'undo-send' },
        { label: 'View', icon: 'external-link', event: 'view-message', data: { id: 123 } },
    ],
});

// Listen for the event
window.addEventListener('view-message', (e) => {
    console.log(e.detail); // { id: 123 }
});
When there are 2+ buttons, they display side by side. A single button stays full width.

​
Action button properties

Each action button accepts these properties:
PropertyTypeDescription
labelstringButton text
iconstringIcon name (optional)
eventstringCustom window event to dispatch
dataobjectData passed to event listener (optional)
colorstringCustom button color (optional)
confirmbooleanRequire two-step confirmation (optional)

​
Custom colors

Give individual buttons a custom color with a tinted background: 
toast({
    type: 'info',
    title: 'Incoming call',
    persistent: true,
    actions: [
        { label: 'Accept', icon: 'check', event: 'accept', color: '#22c55e' },
        { label: 'Decline', icon: 'x', event: 'decline', color: '#ef4444' },
    ],
});

​
Confirmation flow

Add confirm: true to require a two-step click. The first click changes the label to “Sure?” for 3 seconds. If clicked again, the event fires. If not, the label reverts. 
toast({
    type: 'warning',
    title: 'Delete account',
    actions: [
        { 
          label: 'Delete', 
          icon: 'trash', 
          event: 'delete-account', 
          color: '#ef4444', 
          confirm: true 
        },
    ],
});
Use confirmation for destructive actions like deletes. It prevents accidental clicks.

​
Available icons

Gooey Toast includes these built-in icons:
  • external-link
  • eye
  • undo
  • retry
  • reply
  • map-pin
  • download
  • copy
  • trash
  • check
  • x
  • image

​
Registering custom icons

Add your own icons using SVG markup: 
toast.registerIcon('star', '<svg viewBox="0 0 24 24">...</svg>');

// Use in toasts
toast({ 
  type: 'success', 
  title: 'Favorited!', 
  actions: [
    { label: 'View', icon: 'star', event: 'view-favorites' }
  ]
});

​
Event handling

All action buttons dispatch window events when clicked: 
toast({
    type: 'info',
    title: 'New comment',
    actions: [
        { label: 'Reply', icon: 'reply', event: 'reply-comment', data: { commentId: 42 } },
        { label: 'View', icon: 'eye', event: 'view-comment', data: { commentId: 42 } },
    ],
});

window.addEventListener('reply-comment', (e) => {
    const { commentId } = e.detail;
    openReplyDialog(commentId);
});

window.addEventListener('view-comment', (e) => {
    const { commentId } = e.detail;
    scrollToComment(commentId);
});
Clicking any action button automatically dismisses the toast.

​
Use cases

Quick actions

Let users undo, retry, or view details without leaving their current context

Navigation

Link to related pages or open modals directly from notifications

Confirmations

Add a safety layer for destructive operations with two-step confirmation

Multi-choice

Present multiple options like Accept/Decline for incoming requests

​
Real-world examples

​
File upload with actions

toast({
    type: 'success',
    title: 'File uploaded',
    details: [
        { label: 'Name', value: 'report.pdf' },
        { label: 'Size', value: '2.4 MB' },
    ],
    actions: [
        { label: 'View', icon: 'eye', event: 'view-file', data: { fileId: 123 } },
        { label: 'Download', icon: 'download', event: 'download-file', data: { fileId: 123 } },
        { label: 'Delete', icon: 'trash', event: 'delete-file', color: '#ef4444', confirm: true },
    ],
});

​
Incoming call

toast({
    type: 'info',
    title: 'Incoming call from Sarah',
    avatar: '/avatars/sarah.jpg',
    persistent: true,
    actions: [
        { label: 'Accept', icon: 'check', event: 'accept-call', color: '#22c55e', data: { callId: 'abc123' } },
        { label: 'Decline', icon: 'x', event: 'decline-call', color: '#ef4444', data: { callId: 'abc123' } },
    ],
});

window.addEventListener('accept-call', (e) => {
    initiateCall(e.detail.callId);
});

window.addEventListener('decline-call', (e) => {
    rejectCall(e.detail.callId);
});

​
Task completion

toast({
    type: 'success',
    title: 'Task completed',
    message: 'Design review for homepage redesign',
    actions: [
        { label: 'Undo', icon: 'undo', event: 'undo-complete' },
        { label: 'Next task', icon: 'external-link', event: 'next-task' },
    ],
});

​
Tips

  • Use icons consistently — the same icon should always mean the same action
  • Limit to 2-3 actions per toast to avoid overwhelming users
  • Put the primary action first (left position)
  • Use persistent toasts when actions require immediate attention
  • Combine with custom colors to create visual hierarchy
  • Always test confirmation flows to ensure the “Sure?” label appears as expected

Build docs developers (and LLMs) love

Get started for freeTalk to us