Toaster

Sistema de notificaciones toast basado en Sonner. Simple de usar y accesible por defecto.

---

Import

import { Toaster, toast } from '@imansi/ui';

---

Setup

Poné el <Toaster /> una sola vez en el root de tu app:

// App.jsx
import { Toaster } from '@imansi/ui';

export default function App() {
  return (
    <>
      {/* tu app */}
      <Toaster />
    </>
  );
}

---

Uso básico

import { toast } from '@imansi/ui';

<Button onClick={() => toast('Cambios guardados')}>
  Guardar
</Button>

---

Variantes

toast.success('Usuario creado correctamente');
toast.error('No se pudo conectar con el servidor');
toast.warning('Tu sesión expira en 5 minutos');
toast.info('Hay una nueva versión disponible');
toast.loading('Guardando cambios...');

---

Con descripción

toast.success('Usuario creado', {
  description: 'Se envió un correo de confirmación a juan@ejemplo.com',
});

---

Con acción

toast('Cambio eliminado', {
  action: {
    label: 'Deshacer',
    onClick: () => restaurarCambio(),
  },
});

---

Con duración custom

toast.success('Guardado', { duration: 5000 }); // 5 segundos
toast.info('Info', { duration: Infinity });     // persistente

---

Promise (loading → success/error)

toast.promise(guardarUsuario(), {
  loading: 'Guardando usuario...',
  success: 'Usuario guardado correctamente',
  error: 'Error al guardar el usuario',
});

---

Con botón de cerrar

toast.success('Guardado', { closeButton: true });

---

Posición

En <Toaster />:

<Toaster position="top-right" />
<Toaster position="bottom-center" />
<Toaster position="top-center" />

Opciones: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right.

---

Props del <Toaster />

Prop	Tipo	Default	Descripción
position	'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'	'bottom-right'	Posición
richColors	boolean	false	Colores más ricos por variante
closeButton	boolean	false	Muestra botón de cerrar
expand	boolean	false	Expande las notificaciones apiladas
theme	'light' | 'dark' | 'system'	'system'	Tema visual

---

Accesibilidad

• role="status" + aria-live="polite" para success/info
• role="alert" + aria-live="assertive" para error/warning
• Los toast se cierran solos después de la duración (default 4s)
• Se apilan automáticamente si hay varios