Web ResponsiveComponents
Toasts

Toasts

Los toasts son elementos que sirven para dar feedback al usuario después de haber realizado una acción. Puede tratarse de errores, como cuando un formulario no se ha rellenado de manera correcta, mesajes de éxito, como los que recibes después de haber enviado correctamente un mensaje, o simplemente información, como es el caso de un aviso de uso de cookies.

Estilos

Hay 5 tipos diferentes de toast que debes usar en función al mensaje que quieras transmitir al usuario. Pueden ser toasts que muestran errores (danger), mensajes de éxito (success), información (info), avisos (Warning) y los default toasts, que puedes usar para mensajes genéricos.

Como normal general el usuario ha de tener la posibilidad de cerrar el toast usando el icono en forma de aspa, aunque también puedes usar time out y que el toast desaparezcan de manera automática tras un periodo de tiempo en pantalla.

Los 5 tipos de toasts que puedes usar: default, info, success, warning y danger.

Tipo de contenido

Puedes usar diferentes elementos dentro de un toast, desde solo texto a champion icons, links y headings. También puedes decidir si quieres mostrar el icono para cerrar el toast o no en función a tus necesidades.

Si usas headings debes limitar su tamaño a 20dp y el texto del body siempre debe medir 16dp.

Toast con header y links arriba, y toast con champion icon abajo.

Medidas

El contenido mínimo que puedes mostrar en un toast es de 1 línea, con lo que la altura mínima del toast será la del texto más 20dp de márgen. El alto del toast crecerá en función a la cantidad de contenido que se muestre, pero siempre respetando los márgenes de 20dp.

El ancho del toast debe ser siempre el mismo que el del área de contenido de la página y pasará a ser full width en en el breakpoint de móvil.

Toast con header y links arriba, y toast con champion icon abajo.

Posición

Los toasts deben ir situados por encima del contenido con una opacidad del 90% y siempre en la parte superior de la ventana del navegador. El objetivo es que el mensaje aparezca siempre a la vista, contextualizado lo máximo posible con la acción que se acaba de realizar. El toast estará siempre visible en la parte superior de la ventana aún cuando el usuario haga scroll.

Toast sticky en la parte superior de la ventana del navegador.
Al hacer scroll hasta parte superior de la ventana, el toast siempre se situará bajo la navegación.
Puedes situar los info y default toast por encima del contenido. En este caso su opacidad debe ser del 100% y estará fijo en esa posición.