Snackbar

<script setup lang="ts">
import MtSnackbar from "@shopware-ag/meteor-component-library/MtSnackbar";
import MtButton from "@shopware-ag/meteor-component-library/MtButton";
// useSnackbar has no subpath export, so it is imported from the barrel.
import { useSnackbar, type Snackbar } from "@shopware-ag/meteor-component-library";

const { addSnackbar, clearSnackbars } = useSnackbar();

function showDefault() {
  addSnackbar({ message: "Changes saved" });
}

function showSuccess() {
  addSnackbar({ message: "File uploaded", variant: "success" });
}

function showError() {
  addSnackbar({ message: "Something went wrong", variant: "error" });
}

function showProgress() {
  const snackbar = addSnackbar({
    message: "Uploading file",
    variant: "progress",
    progressPercentage: 0,
    successMessage: "File uploaded successfully",
    errorMessage: "Upload failed. Please try again",
  });

  simulateProgress(snackbar);
}

function simulateProgress(snackbar: Snackbar) {
  let progress = 0;

  const interval = setInterval(() => {
    progress += Math.random() * 15;

    if (progress >= 100) {
      progress = 100;
      clearInterval(interval);
      snackbar.uploadState = "success";
    }

    snackbar.progressPercentage = Math.round(progress);
  }, 200);
}
</script>

<template>
  <mt-button variant="secondary" size="small" @click="showDefault">Default</mt-button>
  <mt-button variant="secondary" size="small" @click="showSuccess">Success</mt-button>
  <mt-button variant="secondary" size="small" @click="showError">Error</mt-button>
  <mt-button variant="secondary" size="small" @click="showProgress">Progress</mt-button>
  <mt-button variant="critical" size="small" @click="clearSnackbars">Clear all</mt-button>

  <mt-snackbar />
</template>

Usage

Snackbar shows temporary, non-blocking feedback for short-lived messages, such as confirming that an action completed (saving, deleting, or updating), surfacing errors or warnings that people should notice without leaving their current flow, or reporting background progress that resolves into success or error feedback. Use it when you may need one non-critical follow-up action, such as Undo. mt-snackbar is the host that renders the stack; you publish notifications with the useSnackbar composable.

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

Anatomy

Snackbar is used together with the useSnackbar composable. Mount mt-snackbar once near your app shell to render the stack, then call addSnackbar from useSnackbar wherever an action happens.

<script setup lang="ts">
import { MtSnackbar, useSnackbar } from "@shopware-ag/meteor-component-library";

const { addSnackbar } = useSnackbar();

function showSnackbar() {
  addSnackbar({ message: "Changes saved" });
}
</script>

<template>
  <button type="button" @click="showSnackbar">Show snackbar</button>
  <mt-snackbar />
</template>

See useSnackbar for the full publishing API (addSnackbar, removeSnackbar, clearSnackbars) and every Snackbar option.

API reference

MtSnackbar exposes no props, slots, or events. Mount it once as shown above and drive it entirely through the useSnackbar composable.

Best practices

Behavior

• Snackbar uses a global store, so one mounted MtSnackbar host is usually the right setup for an application.
• Standard snackbars close automatically after 5000ms by default.
• Setting duration to 0 disables the auto-dismiss timer, which means you should remove that snackbar through removeSnackbar or clearSnackbars.
• Hovering the snackbar stack pauses dismissal timers until the pointer leaves.
• progress snackbars stay visible until uploadState changes to success or error, then they close shortly after showing the final message.
• The optional link supports one non-critical follow-up action, not a full decision flow.

Accessibility

• Error and warning snackbars use assertive live announcements, while default, success, and progress snackbars use polite announcements.
• Snackbar notifications receive focus when they appear, so messages should remain concise and understandable out of context.
• Do not use Snackbar for blocking confirmations, legal notices, or other information that must remain available until explicitly dismissed.
• If you provide an action like Undo, make sure that recovery path also exists elsewhere in the interface and not only in the temporary snackbar.

Related

• useSnackbar: the composable for publishing, updating, and removing snackbars.
• Banner: when the message is persistent inline messaging that should remain visible while the user continues working.