Insignia
Uso
Descripción general
Las insignias sirven como forma discreta de proporcionar información sobre contenido nuevo o actualizado. Muestran valores numéricos y recuentos, como la cantidad de actualizaciones disponibles o la cantidad de mensajes no leídos. El valor numérico dentro de la insignia cambia dinámicamente en tiempo real a medida que se producen más notificaciones.
Cuándo se debe utilizar
- Para mostrar información sobre contenido nuevo o actualizado en forma de valor numérico.
- En sistemas con flujos de trabajo complejos que requieren colaboración. Esta práctica puede ayudar a los usuarios a mantenerse al día con una actividad importante.
- Para informar a los usuarios sobre actualizaciones de software importantes, como correcciones de errores o funcionalidades adicionales.
Cuándo no se debe utilizar
- Para información de estado no numérica. Utilice el componente ](pathname://es/info-label.mdx)rótulo de información[ en su lugar.
- Para categorizar elementos y filtrar datos. En su lugar, use etiquetas.
Formato
Anatomía
El componente insignia consta de los siguientes elementos:
- Contenedor con relleno de color específico según el caso de uso.
- Rótulo que muestra un número. Para obtener información sobre el manejo de valores numéricos grandes, consulte Prácticas recomendadas.
Tipos
Las insignias vienen en una variedad de colores que denotan significados específicos:
- Principal: Use la insignia principal cuando realice un seguimiento de elementos relacionados con un flujo de trabajo.
- Notificación: Use la insignia de notificación para superponer íconos y comunicar contenido nuevo y actualizado, como la cantidad de mensajes no leídos.
- Neutra: Use la insignia neutra para la información que no sea crucial.
- Opuesta: Use la insignia opuesta para conservar el contraste de color sobre un fondo oscuro.
Prácticas recomendadas
- Coloque las insignias superpuestas de forma uniforme a lo largo de un producto o experiencia.
- Utilice insignias como componente independiente (izquierda) o como superposición (derecha).
- Jutro tiene una propiedad
maxValuemediante la cual puede establecer el valor máximo de la insignia. Si la propiedadvaluees mayor quemaxValue, entonces la insignia mostrará 'maxValue+'. Si existe un caso de uso en el que haya miles de subprocesos, instancias o errores, la recomendación es establecer un valor para la propiedadmaxValue.
| Insignia como componente independiente | Insignia en superposición |
|---|---|
 |  |
Interacciones
Ratón
- Al hacer clic en una insignia que se superpone a un ícono, se genera una lista con más información sobre las notificaciones específicas.
- Puede aparecer un enlace dentro de una lista asociada a una insignia. Para activar las acciones, los usuarios deben hacer clic en estos enlaces. Por ejemplo, “Ver todas las notificaciones” o “Ir a mensajes nuevos”.
- Las insignias desaparecen después de que los usuarios hayan hecho clic en ellas.
Lector de pantalla
El componente insignia incluye los atributos aria-live="polite" y aria-atomic="true". Se notifica a los usuarios de lectores de pantalla cuando se actualiza el contenido. La perilla liveRegionContext en Storybook permite a los desarrolladores proporcionar contexto al significado de la insignia.
Accesibilidad
Este componente de Jutro ha sido validado para cumplir con las pautas de accesibilidad de WCAG 2.2 AA en su configuración base predeterminada. Esto incluye garantizar que se cumpla lo siguiente:
- La relación de contraste de los elementos textuales con respecto a su fondo es superior a 4,5:1.
- El contenido no textual que debe transmitir significado (como íconos e indicadores de foco) tiene una relación de contraste de al menos 3:1 con sus colores adyacentes.
- El elemento se puede operar con teclado, así como con mouse.
- Se puede acceder al contenido mediante lectores de pantalla, como JAWS y VoiceOver.
El cumplimiento de los criterios de accesibilidad depende, en última instancia, de cómo se implementa y personaliza este componente. Los cambios realizados por el autor del contenido pueden afectar la accesibilidad. Para obtener más información sobre nuestro modelo de responsabilidad compartida, revise nuestra declaración completa sobre accesibilidad de Jutro.
Si aplica temas de color personalizados al fondo de la insignia, asegúrese de comprobar que las relaciones de contraste cumplan con el umbral aceptado de 4,5:1.