Snackbar

El Snackbar es un mensaje breve y temporal que confirma el resultado de una acción que la persona acaba de hacer (guardar, enviar, eliminar) sin interrumpir lo que está haciendo. Lleva un ícono semántico, un texto corto y, opcionalmente, una acción de texto.

Propiedades y configuraciones

Cuando usarlo

Úsalo para confirmar de forma discreta el resultado de una acción que la persona acaba de realizar: “Borrador guardado”, “Certificado enviado a tu correo”, “Documento eliminado”. El mensaje debe poder perderse sin que la persona pierda información importante.

Si el mensaje debe quedar visible en la página o explicar un problema que la persona debe resolver, usa Alert; si un dato de un formulario es incorrecto, usa el mensaje de error del Field; si necesitas que la persona confirme una decisión antes de seguir, usa Modal Dialog.

Buenas prácticas

Recomendado: Confirma acciones que se completan sin cambiar de pantalla

Al guardar, enviar o eliminar sin salir de la página, el Snackbar confirma que funcionó y la persona sigue en lo que estaba.

Recomendado: Ofrece deshacer cuando la acción se puede revertir

Permite corregir un error sin pedir confirmación antes. Con una acción, mantén el mensaje visible hasta que la persona actúe o lo cierre.

Recomendado: Si la acción falla, dilo y permite reintentar

Para fallas de una acción puntual, como un envío, di qué no funcionó y ofrece reintentar. La persona no tiene nada que corregir.

Recomendado: En móvil, ubícalo al pie y sobre las acciones fijas

Muéstralo abajo, a lo ancho de la pantalla con un margen, y por encima de la barra de acción o de la navegación inferior.

Recomendado: En escritorio, ubícalo abajo con un ancho acotado

Abajo y centrado, con el ancho de su mensaje, no compite con el header ni tapa el contenido principal.

Malas prácticas

No recomendado: No lo uses para errores que la persona debe corregir

El Snackbar desaparece y queda lejos del problema. El error debe mostrarse junto al campo o en un Alert visible.

No recomendado: No lo uses para información que la persona necesita conservar

Si el mensaje desaparece, se pierde un dato que se necesita después. Muéstralo en una página de resultado o en un Alert que permanezca.

No recomendado: No apiles varios Snackbars a la vez

Varios mensajes seguidos compiten entre sí y tapan la página. Muestra uno a la vez o agrupa el resultado en un solo mensaje.

No recomendado: No lo uses para pedir una decisión

El Snackbar no bloquea ni espera respuesta. Además, “Cancelar” aquí es ambiguo: ¿cancela la hora o cierra el mensaje? Usa un Modal Dialog.

No recomendado: No tapes acciones ni navegación

Si el Snackbar cubre el botón “Continuar”, la persona no puede seguir hasta que desaparezca.

No recomendado: No lo estires a todo el ancho

En pantallas anchas, una franja de borde a borde se confunde con un aviso de la página y el mensaje queda lejos de donde se mira.

Recomendaciones de accesibilidad

Anuncia el mensaje con una región viva
En el kit el Snackbar lleva role="status", que lo anuncia a lectores de pantalla sin interrumpir. El contenedor debe existir en la página antes de insertar el mensaje para que el anuncio ocurra.

Da tiempo suficiente para leerlo
Si el mensaje se cierra solo, que dure lo necesario para leerlo con calma y no desaparezca mientras tiene el foco o el cursor encima. Si incluye una acción, considera no cerrarlo automáticamente.

No lo uses como único aviso de un error
Un error que la persona debe resolver tiene que quedar visible y asociado al lugar del problema. El Snackbar complementa, no reemplaza, el mensaje del campo o el Alert.

Haz que la acción sea alcanzable con teclado
La acción es un <button> (__action) con nombre visible. Asegura que la persona pueda llegar a ella con Tab antes de que el mensaje desaparezca, sin perder su lugar en la página.

No dependas solo del color ni del ícono
El ícono es decorativo (aria-hidden="true") y el error usa el mismo ámbar de las advertencias: el mensaje debe decir por sí solo qué pasó (“No pudimos guardar los cambios”).

No muevas el foco al mensaje
El Snackbar no debe robar el foco de la tarea en curso. Deja que el anuncio lo haga la región viva.