UNIMINUTO, Corporación Universitaria Minuto de Dios Institución Universitaria Antonio José Camacho
AsignaturaPáginas Web
Guía de componentes y estilos · web y app Cómo hacerlo

Componentes Snackbars

Snackbars

Una snackbar es un mensaje breve en la parte inferior que confirma lo que acaba de pasar. Desaparece sola.

Conversación archivada

Uso

Úsala para confirmar una acción ya hecha, sin interrumpir: "Guardado", "Mensaje enviado", "Archivado".

Úsalo para
  • Confirmar acciones
  • Ofrecer deshacer
Evítalo si
  • Errores críticos o decisiones: usa un diálogo
  • Mensajes que el usuario debe leer con calma: usa un banner

Principios

1

Breve

Una línea, máximo dos.

2

Temporal

Desaparece sola tras 4 a 10 segundos.

3

No bloquea

Se puede seguir usando la app.

Tipos

Cambios guardados

Tipo 01

Solo texto

Un mensaje corto.

Archivo eliminado

Tipo 02

Con acción

Texto y un botón (normalmente "Deshacer").

No se pudo enviar el taller. Revisa tu conexión.

Tipo 03

Dos líneas

Mensaje más largo con la acción debajo.

Anatomía

Archivo eliminado123
  1. Contenedor
  2. Texto
  3. Acción (opcional)

Comportamiento

Conversación archivada
Demostración automáticaAparece abajo, se queda unos segundos y desaparece sola.
  • Entra desde abajo; si hay FAB, sube por encima de él.
  • Se va sola después de 4 a 10 segundos, o al tocar su acción.
  • Solo se muestra una a la vez; la siguiente espera.

Medidas

MedidaValor de referencia
Alto (una línea)48 dp
Anchomín. 344 dp, máx. 672 dp (en celular, ancho − 16 dp)
Radio4 dp
Margen al borde8 dp
Duración4 a 10 s

Medidas de Material Design 2 en dp (en web, 1 dp ≈ 1 px de CSS; en iOS, 1 pt). Son de referencia: verifícalas en la guía oficial antes de usarlas en una evaluación.

Accesibilidad

Anúnciala

role="status" para que el lector la lea sin mover el foco.

Tiempo suficiente

Si tiene acción, dale al menos 10 s o no la ocultes con foco.

Sin información única

Lo importante no debe estar solo en una snackbar.

Fuentes