Actions

Make your toasts interactive by adding action buttons that users can click.

Basic Action

Add a single action button to your toast:

Example

<script setup>
const toast = useToast();

toast.add({
  type: "info",
  title: "New Message",
  description: "You have a new message from John",
  actions: [
    {
      label: "View",
      onClick: () => {
        console.log("View clicked");
        navigateTo("/messages");
      },
    },
  ],
});
</script>

Multiple Actions

Add multiple action buttons for different choices:

Example

<script setup>
const toast = useToast();

toast.add({
  type: "warning",
  title: "Unsaved Changes",
  description: "You have unsaved changes. What would you like to do?",
  actions: [
    {
      label: "Save",
      onClick: () => {
        // Save logic
        toast.success("Saved!", "Your changes have been saved");
      },
    },
    {
      label: "Discard",
      onClick: () => {
        // Discard logic
        toast.info("Discarded", "Changes have been discarded");
      },
    },
  ],
});
</script>

Action Layouts

Actions support two layouts: horizontal (default) and vertical.

Horizontal Layout

Actions are displayed side-by-side:

Example

<script setup>
const toast = useToast();

toast.add({
  type: "success",
  title: "Update Available",
  description: "A new version is ready to install",
  actionsLayout: "horizontal", // default
  actions: [
    { label: "Update Now", onClick: () => {} },
    { label: "Later", onClick: () => {} },
  ],
});
</script>

Vertical Layout

Actions are stacked vertically (useful for longer labels):

Example

<script setup>
const toast = useToast();

toast.add({
  type: "info",
  title: "Choose an Option",
  actionsLayout: "vertical",
  actions: [
    { label: "Download as PDF", onClick: () => {} },
    { label: "Email to Me", onClick: () => {} },
    { label: "Share Link", onClick: () => {} },
  ],
});
</script>

Common Action Patterns

Undo Action

Example

<script setup>
const toast = useToast();

function deleteItem() {
  // Delete logic here

  toast.add({
    type: "success",
    title: "Item Deleted",
    description: "The item has been removed",
    actions: [
      {
        label: "Undo",
        onClick: () => {
          // Restore logic
          toast.info("Restored", "Item has been restored");
        },
      },
    ],
  });
}
</script>

Confirm/Cancel

Example

<script setup>
const toast = useToast();

toast.add({
  type: "warning",
  title: "Confirm Delete",
  description: "This action cannot be undone",
  duration: Infinity, // Don't auto-dismiss
  actions: [
    {
      label: "Delete",
      onClick: () => {
        // Delete logic
        toast.success("Deleted", "Item has been deleted");
      },
    },
    {
      label: "Cancel",
      onClick: () => {
        toast.clear(); // Just dismiss
      },
    },
  ],
});
</script>

View Details

Example

<script setup>
const toast = useToast();

toast.add({
  type: "error",
  title: "Upload Failed",
  description: "3 files could not be uploaded",
  actions: [
    {
      label: "View Details",
      onClick: () => {
        // Show modal or navigate
        showErrorDetails();
      },
    },
    {
      label: "Retry",
      onClick: () => {
        // Retry upload
        retryUpload();
      },
    },
  ],
});
</script>

Example

<script setup>
const toast = useToast();

toast.add({
  type: "success",
  title: "Order Placed",
  description: "Your order #12345 has been confirmed",
  actions: [
    {
      label: "Track Order",
      onClick: () => {
        navigateTo("/orders/12345");
      },
    },
  ],
});
</script>

Action Best Practices

Keep Labels Short

Bad vs Good

// ❌ Too long
{ label: 'Click here to view more details', onClick: () => {} }

// ✅ Concise
{ label: 'View Details', onClick: () => {} }

Use Action Verbs

Bad vs Good

// ❌ Unclear
{ label: 'OK', onClick: () => {} }

// ✅ Clear action
{ label: 'Confirm', onClick: () => {} }

Limit Number of Actions

Bad vs Good

// ❌ Too many choices
actions: [
  { label: 'Option 1' },
  { label: 'Option 2' },
  { label: 'Option 3' },
  { label: 'Option 4' },
  { label: 'Option 5' }
]

// ✅ Focus on primary actions (1–3 max)
actions: [
  { label: 'Confirm' },
  { label: 'Cancel' }
]

Design Tip: For more than 2–3 actions, consider using a modal or dialog instead of cramming them into a toast.