BaseSnackbar

import BaseSnackbar from "@wikicasa-dev/components/UIKit/BaseSnackbar";

Use it to confirm an action that happened ("Annuncio salvato nei preferiti", "Annuncio ripristinato") or to report a background error, without taking space in the layout. It closes itself after duration ms (default 3000) and shows a progress bar meanwhile. For a message that must stay on the page, use BaseAlert.

Control it with v-model:open. Set v-model:refresh to true to close and reopen it (restarting the timer) when the same snackbar fires again while already open. Colors: alertClass = primary (default, lavender/blue), danger (pale red/red), darkblue (dark blue/white).

#Usage

<script setup lang="ts">
import BaseSnackbar from "@wikicasa-dev/components/UIKit/BaseSnackbar";
import BaseButton from "@wikicasa-dev/components/UIKit/BaseButton";
import { ref } from "vue";

const open = ref(false);
const refresh = ref(false);

const save = () => {
  if (open.value) refresh.value = true;
  else open.value = true;
};
</script>

<template>
  <BaseButton type="button" @click="save">Salva nei preferiti</BaseButton>

  <BaseSnackbar
    v-model:open="open"
    v-model:refresh="refresh"
    :duration="3500"
    class="favorites-toast"
  >
    <template #title>
      <strong>Trilocale in Via Roma, Milano</strong>
    </template>
    Annuncio salvato nei preferiti.
  </BaseSnackbar>
</template>

<style>
.favorites-toast { width: 100%; justify-content: space-between; }
</style>

#Do / Don't

• One snackbar per message type; drive it with state, don't mount/unmount it with v-if per message.
• The close (X) button is on by default; pass :with-close-icon="false" for short confirmations. Replace the icon via the toast-close slot.
• An extra action button (e.g. "Annulla") goes in the toast-action slot.
• By default it is teleported to body and sits fixed at the bottom-left. Pass :to="false" to render the viewport in place (e.g. inside a modal), or a selector to teleport elsewhere.
• swipeDirection (default left) also decides the side it slides in from.
• Use type="background" for messages not caused by the user's own action, so screen readers announce them less intrusively.
• class goes on the toast itself; other fallthrough attributes (including style and id) are dropped. Use viewportClasses for the container (e.g. a z-index above modals).

#Styling hooks

On the viewport (.uikit-alert-viewport, add your own class with viewportClasses): --uikit-alert-viewport-padding, --uikit-alert-viewport-position, --uikit-alert-viewport-top/-right/-bottom/-left, --uikit-alert-viewport-display, --uikit-alert-viewport-flex-direction, --uikit-alert-viewport-align-items, --uikit-alert-viewport-justify-content.

On the toast (.uikit-alert / .uikit-toast-root): --uikit-alert-bg-color, --uikit-alert-text-color, --uikit-alert-progress-indicator-bg-color, --uikit-toast-root-display (e.g. grid for custom layouts), --uikit-toast-root-gap.

#API

Generated from the component's types. Do not edit by hand.

Props

Name	Type	Default	Required	Description
alertClass	"primary" | "danger" | "darkblue"	"primary"
duration	number	3000		Time in milliseconds that each toast should remain visible for.
swipeDirection	SwipeDirection	"left"		Direction of pointer swipe that should close the toast.
to	string | false | HTMLElement	"body"		Vue native teleport component prop :to
dataCy	string	""
withCloseIcon	boolean	true
closeClasses	ClassTypeProp
viewportClasses	ClassTypeProp	""
type	"foreground" | "background"	"foreground"		Control the sensitivity of the toast for accessibility purposes. For toasts that are the result of a user action, choose foreground. Toasts generated from background tasks should use background.
open	Optional<boolean>	false
refresh	Optional<boolean>	false

Events

Name	Payload
update:refresh	[value: Optional<boolean>]
update:open	[value: Optional<boolean>]

v-model

• v-model:open (Optional<boolean>)
• v-model:refresh (Optional<boolean>)

Slots

Name	Slot props
trigger	{ open: () => boolean; }
title
default
toast-close
toast-action

Exposed (template ref)

None.