Toast

Notificaciones temporales inspiradas en noice.nvim, con posicionamiento configurable y deduplicación.

Toast

Demo

<script setup lang="ts">
import { ref } from 'vue'
import { ToastContainer } from '@herdrate/vue'
const items = ref([])

function showAt(position: string) {
  items.value.push({ id: Date.now(), message: 'Hola', color: 'primary', position })
}
function dismiss(id: number) {
  items.value = items.value.filter(t => t.id !== id)
}
</script>

<template>
  <button @click="showAt('bottom-right')">bottom-right</button>
  <ToastContainer
    :toasts="items.filter(t => t.position === 'bottom-right')"
    :remove="dismiss"
    position="bottom-right"
  />
</template>

Demo con useToast()

Esta demo usa la composable useToast() real del paquete (singleton, estado compartido) — alineada con el flujo que copiarías a tu proyecto.

Tipos

ToastItem

Campo	Tipo	Requerido	Descripción
id	string	✅	Identificador único
message	string	✅	Mensaje a mostrar
color	Color	✅	Color semántico
icon	string	✅	Icono o emoji
timestamp	number	✅	Timestamp UNIX

API

Toast

Prop	Tipo	Default	Descripción
message	string	—	Contenido del toast
color	'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark'	'primary'	Color semántico del toast
icon	string	''	Icono personalizado (default: ▼/✓/●/✖)

ToastContainer

Prop	Tipo	Default	Descripción
toasts	ToastItem[]	—	Lista de toasts a mostrar
remove	(id: string) => void	—	Función para cerrar toast
position	'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' \| 'top-center' \| 'bottom-center'	'bottom-right'	Posición en pantalla

useToast()

Retorno	Tipo	Descripción
toasts	Ref<ToastItem[]>	Lista reactiva de toasts activos
add	(opts: AddOptions) => string	Agrega un toast, retorna ID
remove	(id: string) => void	Elimina un toast por ID

AddOptions

Prop	Tipo	Default	Descripción
message	string	—	Contenido del toast
color	'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark'	'primary'	Color semántico
replace	boolean	false	Reemplaza toast duplicado
filter	string	—	Clave para detectar duplicado

Tokens usados

--font-mono, --bg, --bg-elevated, --border, --text, --color-*