Snackbar

Temporary notification (toast) with optional action button.

Open in Storybook

Interactive Demo

Usage

<script setup>
import { ref } from 'vue';
import { Snackbar } from '@yellowcard/b2b-design-system';

const show = ref(true);
</script>

<template>
  <Snackbar
    v-model="show"
    message="Changes saved successfully"
    :autoDismiss="true"
    :duration="3000"
  />
</template>

API Reference

Props

Prop	Type	Default	Description
message*	string	—	Notification message
actionLabel	string	—	Action button text
dismissible	boolean	true	Show dismiss button
autoDismiss	boolean	true	Auto-dismiss after duration
duration	number	5000	Auto-dismiss delay in ms
priority	string	—	Priority level
position	string	—	Screen position
positionType	string	—	Position type (fixed, absolute, relative)
modelValue	boolean	true	Visibility (v-model)

Events

Event	Payload	Description
update:modelValue	boolean	Visibility change
action	—	Action button clicked