Las notificaciones son mensajes que comunican información al usuario. Los dos tipos principales de notificaciones son notificaciones toast y notificaciones en línea.
Utilizamos notificaciones para informar a los usuarios de actualizaciones o cambios en el estado del sistema. La comunicación con los usuarios y la retroalimentación inmediata son importantes para generar confianza. Si bien las notificaciones son un método eficaz para comunicarse con los usuarios, son disruptivas y deben usarse con moderación.
Para obtener más contexto sobre cuándo usar cada tipo de notificación, incluidos los modales, consulte el patrón de notificaciones.
En línea
Las notificaciones en línea aparecen en los flujos de tareas para notificar a los usuarios el estado de una acción. Suelen aparecer en la parte superior del área de contenido principal.
Toast
Los toast son elementos basados en el tiempo, se utilizan para mostrar mensajes cortos; generalmente aparecen en la parte superior de la pantalla y desaparecen después de unos segundos.
Anatomía
Icono: informa a los usuarios del tipo de notificación de un vistazo.
Título: ofrece a los usuarios una descripción general rápida de la notificación.
Mensaje (opcional): proporciona detalles adicionales y pasos procesables para que los tome el usuario.
Botón Cerrar (opcional): cierra la notificación.
Dialog
El componente Dialog es utilizado para dar información o solicitar una acción al usuario. Los botones deben ajustarse por separado.
Banner
El componente Banner es utilizado para desplegar información importante y permite tomar decisiones relacionadas a dicha información.
Event
El componente Event es utilizado para visualizar un evento o trabajo, dispone información realcionada y contiene un componente Alert.
Todos los componentes han sido diseñados para trabajar armoniosamente juntos, como partes de un todo mayor. Es por esto que cada componente deber ser integrado y construido siguiendo nuestros lineamientos de usabilidad y guías de construcción. Toda esta información se encuentra en la página Lineamientos de construcción de nuestro sistema de diseño. Además se debe tener en consideración la accesibilidad en el uso de la tipografía y la accesibilidad del color.