Toast

Notificaciones no intrusivas para feedback de acciones. Aparecen brevemente y desaparecen automáticamente.

Variantes

Tipos de toast

Uso

import { Toast, ToastContainer } from '@codeway/ui';

function App() {
  const [toasts, setToasts] = useState([]);

  const addToast = (toast) => {
    const id = Date.now();
    setToasts(prev => [...prev, { ...toast, id }]);
    setTimeout(() => {
      setToasts(prev => prev.filter(t => t.id !== id));
    }, 4000); // Auto-dismiss en 4s
  };

  return (
    <>
      <Button onClick={() => addToast({ 
        title: 'Guardado', 
        variant: 'success' 
      })}>
        Guardar
      </Button>

      <ToastContainer>
        {toasts.map(toast => (
          <Toast 
            key={toast.id} 
            {...toast}
            onClose={() => setToasts(prev => 
              prev.filter(t => t.id !== toast.id)
            )} 
          />
        ))}
      </ToastContainer>
    </>
  );
}

Notas por plataforma

🌐 Web

  • • Posición: bottom-right (fixed)
  • • Auto-dismiss: 4 segundos
  • • Max 3 visibles simultáneamente
  • • aria-live="polite"

📱 Mobile (iOS / Android)

  • • Posición: top con safe area
  • • Swipe-to-dismiss
  • • Haptic feedback en aparición
  • • Respetar notch/dynamic island