Estados y notificaciones
Toast, avisos, errores de campo y recuperación con semánticos estables.
Elegir el contenedor por función
| Mensaje | Ubicación | Conducta |
|---|---|---|
| Confirmación breve | Toast | Status discreto; conserva la tarea y no roba foco |
| Advertencia de tarea | Junto al proceso | Explica consecuencia y qué revisar |
| Error de campo | Bajo el campo | aria-invalid, descripción y corrección concreta |
| Bloqueo de página | Banner o sección afectada | Persiste y ofrece recuperación |
| Decisión irreversible | Confirmación deliberada | Alcance, consecuencia y acción explícita |
Muestras de los cuatro estados
MUESTRAS ESTÁTICAS · PRUEBA EL CIERRE EN EL EJEMPLO INTERACTIVO
La revisión puede continuar desde este expediente.
Comprueba si la factura está expresada en BOB o USD.
La respuesta es incierta. Verifica el estado antes de intentarlo otra vez.
En el producto, el informe estará disponible cuando termine.
El fondo permanece neutro. Solo la señal de estado recibe el semántico: icono, título explicativo y contenido suficiente para decidir. Cambia el tema del DS para revisar claro y oscuro.
Probar aparición y cierre
SIMULACIÓN · NO REGISTRA NI ENVÍA PAGOS
! Ingresa un importe mayor que cero.
El toast no toma el foco. Este ejemplo permanece hasta cerrarlo y devuelve el foco al botón que lo abrió. El error de campo sigue junto al dato.
Semánticos
Éxito verde para una operación verificada; advertencia ámbar para atención; error rojo para fallo; información azul para cambio informativo. Índigo no significa error, aprobación ni seguridad. Icono y título permiten entender el estado sin distinguir colores.
Toast
Título breve, explicación cuando hace falta y acción opcional. Región role="status" para éxito e información; role="alert" para errores que interrumpen una acción. No anunciar dos veces al apilar toast y banner con el mismo texto. Los avisos estáticos de la documentación no deben anunciarse al cargar.
Máximo dos simultáneos en la muestra aplicada; consolidar duplicados y priorizar el error persistente. En producto, duración configurable para mensajes breves, con pausa por hover/foco cuando corresponda. Error con recuperación o acción importante permanece disponible; no depender de una cuenta regresiva.
Cerrar es una acción de 44 px con nombre accesible. No desplazar el foco al toast al abrirlo. Después de cerrarlo, volver a un disparador todavía existente o al contexto lógico. En móvil, no tapar el CTA del formulario ni el foco. Notificaciones sin datos sensibles innecesarios.
Retícula y simetría
Toast con radio de panel 20 px, padding 16 px y gap 12 px. Retícula: señal 44 px, contenido flexible, cierre 44 px. Icono y cierre se alinean arriba con idéntica reserva espacial; los pictogramas usan trazo de 1.8 y caja de 20 px. No añadir franjas de color laterales. El cierre circular no usa el padding de un pill con texto.
En móvil, icono y cierre conservan las esquinas y el mensaje ocupa una segunda fila completa. Así no se comprime entre dos controles. Cierre con nombre accesible, hover y foco índigo, y retorno al disparador. El contenido no se corta ni desaparece al envolver líneas. .lg-toast y sus partes se incluyen en components.css para que la app pueda reproducir esta misma geometría.
Ubicación en producto: escritorio hacia el extremo inferior con 24 px de separación y ancho inicial de 420 px; móvil con 16 px laterales y por encima de barras fijas y safe-area-inset-bottom. Reservar espacio si puede cubrir controles o mensajes. La demostración del DS permanece dentro del contenido para permitir inspección sin tapar acciones.
Recuperación
Explicar qué ocurrió y qué puede hacer el usuario. «Intenta otra vez» solo si repetir es seguro. Para pago incierto: verificar estado antes de enviar de nuevo. Un fallo de una sección no vacía todo el dashboard. Registrar detalle técnico fuera del texto visible al usuario.
Estados del componente
Además de éxito/advertencia/error/info, cubrir carga, vacío, deshabilitado, permiso insuficiente y pérdida de conexión. Evitar «algo salió mal» sin contexto. Los ejemplos no guardan ni exportan información real.