Componentes Índice de páginas
Píldoras
Datos
Se emplean para resaltar texto dentro de una tabla o una página y para identificar elementos independientes entre sí (categorías, filtros…).
Índice de apartados de esta página
Variantes #
Primario
Advertencia
Éxito
Alerta
Está compuesto por una etiqueta de texto, puede ir apoyado por un icono a la izquierda reforzando el mensaje del texto. Independientemente también puede contar con un botón-icono x
a la derecha del texto cuando convenga ofrecer la opción de cerrar o eliminar la etiqueta. El color, de la misma manera que los iconos, debe utilizarse para apoyar el mensaje.
Accesibilidad #
Cómo funciona #
Depende de la variante puede ser una etiqueta <span> o <button>. Ten en cuenta los atributos ARIA cuando insertes iconos.
| Qué usar | Dónde | Función |
|---|---|---|
aria-hidden=true |
SVG que apoya a la etiqueta de texto | Oculta el icono a lectores de pantalla, el texto ya describe la acción del botón. |
role=img y aria-label |
SVG sin etiqueta de texto | El lector de pantalla describe la etiqueta o acción definida con el aria-label. No describas el icono. |