Toast

<script setup lang="ts">
import { ref } from "vue";
import MtToast from "@shopware-ag/meteor-component-library/MtToast";
import MtButton from "@shopware-ag/meteor-component-library/MtButton";
// The Toast type is only available from the barrel, it has no subpath export.
import type { Toast } from "@shopware-ag/meteor-component-library";

const toasts = ref<Toast[]>([]);

function addToast(toast: Omit<Toast, "id">) {
  toasts.value = [{ id: crypto.randomUUID(), ...toast }, ...toasts.value];
}

function removeToast(id: Toast["id"]) {
  toasts.value = toasts.value.filter((toast: Toast) => toast.id !== id);
}

function showPositive() {
  addToast({ type: "positive", msg: "Changes saved" });
}

function showInformal() {
  addToast({ type: "informal", msg: "Sync in progress" });
}

function showCritical() {
  addToast({ type: "critical", msg: "Could not save product", dismissible: true });
}

function showWithAction() {
  addToast({
    type: "positive",
    msg: "Item deleted",
    action: { label: "Undo", callback: () => addToast({ type: "informal", msg: "Restored" }) },
  });
}
</script>

<template>
  <mt-button variant="primary" size="small" @click="showPositive">Positive</mt-button>
  <mt-button variant="secondary" size="small" @click="showInformal">Informal</mt-button>
  <mt-button variant="critical" size="small" @click="showCritical">Critical</mt-button>
  <mt-button variant="secondary" size="small" @click="showWithAction">With action</mt-button>

  <mt-toast :toasts="toasts" @remove-toast="removeToast" />
</template>

Usage

Toast is short-lived, action-bound feedback for confirming a save or reporting that something failed. Use the positive and informal types for non-critical feedback that can disappear on its own, and the critical type for problems the user should not miss. Add dismissible or an action when the message needs a manual close control or a single follow-up such as Undo, and keep messages to a few words since toasts are brief and not persistent.

import { MtToast } from "@shopware-ag/meteor-component-library";

Anatomy

Toast renders a host that you mount once, usually near the app shell. It does not own the toast state. You pass the current toasts through the toasts prop and remove a toast from your own list when the component emits remove-toast.

<script setup lang="ts">
import { ref } from "vue";
import { MtToast, type Toast } from "@shopware-ag/meteor-component-library";

const toasts = ref<Toast[]>([]);

function addToast() {
  toasts.value = [{ id: crypto.randomUUID(), type: "positive", msg: "Changes saved" }, ...toasts.value];
}

function removeToast(id: Toast["id"]) {
  toasts.value = toasts.value.filter((toast) => toast.id !== id);
}
</script>

<template>
  <button type="button" @click="addToast">Show toast</button>
  <mt-toast :toasts="toasts" @remove-toast="removeToast" />
</template>

Toast

The exported Toast type describes a single notification in the toasts list. Prepend new toasts so the most recent one appears first.

API reference

Props

Events

Best practices

Behavior

• Toast places each message into one of two categories automatically based on its type, dismissibility, and action.
• Quick toasts are non-dismissible, non-critical toasts of type positive or informal with no action. They appear bottom center and auto-close after about three seconds.
• Regular toasts are critical, dismissible, or action-bearing toasts. They appear bottom right and auto-close after about ten seconds.
• A critical toast that has an action does not auto-close and must be dismissed manually.
• Hovering a toast pauses its auto-close timer until the pointer leaves.
• The component never removes a toast from your data. It only emits remove-toast with the toast id, and you update your own list in response.

Accessibility

• critical toasts use assertive live announcements, while positive and informal toasts use polite announcements.
• A critical toast with an action uses an alertdialog role, so it stays until the user acts on or dismisses it.
• Toasts can be dismissed with the Escape key when they are focused.
• Keep messages concise and understandable out of context, since toasts are short-lived.
• Do not use Toast for blocking confirmations, legal notices, or other information that must remain available until explicitly dismissed.

Related components

• Snackbar: when you need overlay feedback driven through the useSnackbar() store, with built-in support for progress and link actions.