Tag

Representa un valor seleccionado, una categoría o una persona, dentro de un bloque compacto. Útil para filtros activos, listas de destinatarios o materias de una causa.

Default

Cuándo usar

  • Mostrar valores seleccionados en un filtro, como materias o estados.
  • Listar personas asociadas a una causa o documento.
  • Resumir categorías que el usuario aplicó como criterio.

Cuándo no usarlo

  • Si el usuario debe ejecutar una acción primaria: usa un botón.
  • Si solo se trata de una etiqueta decorativa sin estado: prefiere texto plano.

Con avatar

Personas asignadas

Al representar personas, acompaña el nombre con un Avatar usando la prop media.

Dismissible

Quitar un valor

Cuando el tag representa un valor que el usuario puede quitar, usa InteractionTag con acción secundaria. El TagGroup expone onDismiss con el value retirado.

Tamaños

Tres tamaños

Usa extra-small en densidades muy altas, small en toolbars, y medium como default.

MiniPequeñoMedio

Accesibilidad

Roles y teclado

  • El TagGroup expone role="toolbar" cuando contiene tags interactivos.
  • Cada InteractionTag es focusable con Tab; la acción secundaria responde a Enter o Backspace para quitar.
  • Acompaña el botón de quitar con aria-label descriptivo, por ejemplo Quitar Civil.
  • Asegura contraste AA del texto del tag en su fondo.

Contenido

Texto del tag

  • Una o dos palabras, sin signos de puntuación.
  • Sustantivos para categorías; nombres completos para personas.
  • Evita abreviaciones que el usuario no reconoce de un vistazo.