# 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. ```tsx import { Tag, TagGroup } from "@fluentui/react-components"; Civil Laboral Familia ``` ## 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`. ```tsx }> Valentina Pérez }> Diego Soto ``` ## 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. ```tsx const [tags, setTags] = useState(["Civil", "Laboral", "Familia"]); setTags((t) => t.filter((x) => x !== value)) }> {tags.map((t) => ( {t} ))} ``` ## Tamaños ### Tres tamaños Usa `extra-small` en densidades muy altas, `small` en toolbars, y `medium` como default. ```tsx Mini Pequeño Medio ``` ## 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.