Vue

Buttons & Actions

Add action buttons, control close behavior, and display timestamps on toasts.

Add inline action buttons through the buttons config.

Basic Button Group

toast.info({
  title: "File archived",
  description: "Use an action when the user can recover immediately.",
  buttons: {
    alignment: "bottom-right",
    buttons: [
      {
        id: "undo",
        label: "Undo",
        dismissAfterClick: true,
        onClick() {
          toast.success({ title: "Restored" });
        },
      },
    ],
  },
});

Try this example

Button mirrors the action-button example shown above.

Edit this pageorReport an issue

Timers & Progress

Duration rules, progress bars, pause strategies, queue behavior, and the loading helper.

Quick Start

Install the Nuxt module and show your first toast.