33/Interacción y estado

Toast

Notificaciones temporales con la API cobalto.toast(). Se pausan con hover o foco.

Variantes

Los botones usan data-cb-toast con la configuración en JSON, para probar sin escribir JS.

HTML

<button class="cb-btn cb-btn--outline" type="button" data-cb-toast='{"title": "Cambios guardados", "variant": "success"}'>Éxito</button>
<button class="cb-btn cb-btn--outline" type="button" data-cb-toast='{"title": "Sincronizando", "message": "Puede tardar unos segundos.", "variant": "info"}'>Info</button>
<button class="cb-btn cb-btn--outline" type="button" data-cb-toast='{"title": "Factura por vencer", "message": "Vence en 3 días.", "variant": "warning"}'>Aviso</button>
<button class="cb-btn cb-btn--outline" type="button" data-cb-toast='{"title": "No se pudo guardar", "message": "Revisa tu conexión.", "variant": "danger", "duration": 0}'>Error fijo</button>
<button class="cb-btn cb-btn--outline" type="button" data-cb-toast="Mensaje simple">Texto</button>

Clases y modificadores

Clase	Descripción
`.cb-toaster`	Contenedor fijo. `--top` y `--left` para otras esquinas.
`.cb-toast`	Notificación con línea lateral de color.
`.cb-toast--success\|warning\|danger\|info`	Variantes.
`.cb-toast__icon`, `.cb-toast__title`, `.cb-toast__message`, `.cb-toast__action`, `.cb-toast__close`	Partes.

Atributos data-cb-*

Atributo	Descripción
`data-cb-toast`	En un botón: JSON con las opciones o un texto simple.

JavaScript

Evento	Cuándo se dispara
`cb:open` / `cb:close`	En el toast al aparecer y al cerrarse.

API completa:

const notice = cobalto.toast({
  title: 'Cliente creado',
  message: 'María Ramírez ya puede iniciar sesión.',
  variant: 'success', // default, info, success, warning, danger
  duration: 5000, // 0 para que no se cierre sola
  position: 'bottom-right', // bottom-left, top-right, top-left
  action: { label: 'Deshacer', onClick: () => deshacer() },
});

notice.close();

Desde Livewire 4, con un evento despachado con $this->dispatch():

document.addEventListener('livewire:init', () => {
  Livewire.on('toast', (event) => cobalto.toast(event));
});

Accesibilidad

Los toasts usan role="status"; los de error, role="alert" para anunciarse de inmediato.
El tiempo se pausa con hover y con foco, para dar tiempo a leer o usar la acción.
Para mensajes importantes usa duration: 0 y deja que la persona lo cierre.
El botón de cerrar usa "Cerrar notificación"; cámbialo con la opción closeLabel o con cobalto.setMessages({ toastClose }).