Notificaciones
Las notificaciones se emplean para informar al usuario de un cambio que ha ocurrido en el sistema o para destacar un texto importante que afecta a la página.
- HTML
- JS
<div role="alert" class="ulpgcds-messages ulpgcds-messages--error">Este es un mensaje de error y debe advertir al usuario que una acción ha fallado</div>
<div role="alert" class="ulpgcds-messages ulpgcds-messages--warning">Este es un mensaje de advertencia. Debe destacar información importante para el usuario</div>
<div role="alert" class="ulpgcds-messages ulpgcds-messages--status">Este es un mensaje de éxito. Se emplea para mostrar al usuario que una acción se ha completado correctamente</div> Uso del componente
Las notificaciones del sistema proporcionan información para que los usuarios comprendan lo que está sucediendo ante una acción realizada (éxito, advertencia o error). Estas comunicaciones deben ser sencillas, claras y deben identificar claramente lo que ha sucedido, si por acción del usuario o no.
También se pueden emplear las notificaciones para informar sobre excepciones importantes de una página. Por ejemplo, para informar que el contenido de una página está obsoleto.
Buenas prácticas:
- No utilice lenguaje técnico o que el usuario puede desconocer.
- Utilice la variante verde para informar de que una acción se ha completado con éxito.
- Utilice la variante naranja para advertir o dar sugerencias.
- Utilice la variante roja para comunicar errores o mensajes que mucha importancia.
Estilos CSS
Estas son las clases aplicadas a las etiquetas HTML para conseguir los diferentes estilos.
| Selector CSS | Descripción |
|---|---|
| .ulpgcds-messages | Aplica estilos generales de los mensajes de alerta o notificación |
| .ulpgcds-messages--error | Estilos específicos de cuando hay un error |
| .ulpgcds-messages--warning | Estilos aplicados a un mensaje de aviso |
| .ulpgcds-messages--status | Estilos aplicados a un mensaje de éxito o estado |
Diseño
En esta sección se pueden ver los aspectos que presenta el componente para las diferentes pseudoclases relativas a la interacción con el mismo. Estos estilos siguen los mismos patrones de interacción que el resto de los componentes del Design System, por lo que su modificación puede afectar a la consistencia del sistema y a la experiencia de los usuarios.
