Toast

A non-blocking notification that auto-dismisses after a configurable duration.

Demo

Toast Types

Usage

Basic (managed by ref)

<script setup lang="ts">
import { ref } from 'vue'
import { LiquidToast, LiquidButton } from '@liquid/ui'

const visible = ref(false)
</script>

<template>
  <LiquidButton @click="visible = true">Show Toast</LiquidButton>

  <LiquidToast
    v-model="visible"
    type="success"
    message="Saved successfully!"
    :duration="3000"
    position="bottom-right"
  />
</template>

Global Toast via Composable

For app-wide toast management, use a shared composable pattern (as used in the Blog and Admin demos):

// composables/useToast.ts
import { reactive } from 'vue'

interface ToastItem {
  id: number
  message: string
  type: 'info' | 'success' | 'warning' | 'error'
  visible: boolean
}

let nextId = 0
export const toastState = reactive({ items: [] as ToastItem[] })

export function toast(message: string, type: ToastItem['type'] = 'info') {
  const id = ++nextId
  toastState.items.push({ id, message, type, visible: true })
}

export function dismiss(id: number) {
  const i = toastState.items.findIndex(t => t.id === id)
  if (i !== -1) toastState.items.splice(i, 1)
}

<!-- App.vue -->
<template>
  <GlassFilterProvider>
    <LiquidToast
      v-for="item in toastState.items"
      :key="item.id"
      v-model="item.visible"
      :message="item.message"
      :type="item.type"
      :duration="0"
      position="bottom-right"
      @update:model-value="(v) => { if (!v) dismiss(item.id) }"
    />
    <RouterView />
  </GlassFilterProvider>
</template>

Props

Prop	Type	Default	Description
modelValue	boolean	false	Controls visibility (use with v-model)
message	string	''	Notification text content
type	'info' | 'success' | 'warning' | 'error'	'info'	Semantic type (controls color and icon)
duration	number	3000	Auto-close delay in ms. Set to 0 to disable auto-close
position	'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center'	'bottom-right'	Screen position
variant	'default' | 'glass-css-only' | 'glass-highlight-layered'	'default'	Visual style

Events

Event	Payload	Description
update:modelValue	boolean	Emitted when toast closes (auto or manual)

Notes

• Toast uses <Teleport to="body">, so it always floats above all other content.
• Auto-close starts onMounted. Set duration="0" when managing close manually.
• In VitePress, wrap <LiquidToast> in <ClientOnly> to avoid SSR Teleport issues.