useSnackbar

<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

useSnackbar publishes Snackbar notifications from anywhere in your application. It uses a global store, so mount a single mt-snackbar host near your app shell and then call addSnackbar wherever the action happens; the host renders the shared stack.

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

const { addSnackbar } = useSnackbar();

addSnackbar({ message: "Changes saved", variant: "success" });

API

useSnackbar() returns:

Member	Type	Description
`snackbars`	`Readonly<Ref<Snackbar[]>>`	The reactive, read-only list of active snackbars that the `mt-snackbar` host renders.
`addSnackbar`	`(snackbar: Omit<Snackbar, "id">) => Snackbar`	Adds a snackbar to the stack and returns it with a generated `id`. Defaults `duration` to `5000`.
`removeSnackbar`	`(id: string) => void`	Removes the snackbar with the given `id`.
`clearSnackbars`	`() => void`	Removes all snackbars.

Snackbar

The shape passed to addSnackbar (without id):

Property	Type	Description
`message`	`string`	The text shown in the snackbar. Required.
`variant`	`"success" \| "error" \| "warning" \| "progress"`	Visual style and semantics.
`icon`	`string`	Optional leading icon name.
`link`	`{ text: string; url: string }`	Optional single follow-up link.
`duration`	`number`	Auto-dismiss delay in milliseconds. Defaults to `5000`. Set it to `0` to disable auto-dismiss and remove the snackbar yourself with `removeSnackbar`.
`progressPercentage`	`number`	Current progress from `0` to `100`, for `progress` snackbars.
`uploadState`	`"success" \| "error"`	Terminal state that resolves a `progress` snackbar.
`successMessage`	`string`	Message shown when a `progress` snackbar resolves successfully.
`errorMessage`	`string`	Message shown when a `progress` snackbar resolves with an error.

Snackbar: the component that renders the notifications this composable publishes.

Edit this pageorReport an issue

useFutureFlags

Reads the active future flags inside a component so it can adapt to behavior the application has opted into.

Tooltip

A v-tooltip directive for attaching a tooltip to any element, a lightweight alternative to the Tooltip component.

useSnackbar

Usage

API

Snackbar

Related components