Ficha
- Categoría
- Data display
- Nivel
- átomo
- Estado
- en revisión
- Radix
- no
- Actualizado
- 2026-10-26
- Figma
- 441:25887
- Fuente
design-system/componentes/Tag.md
Etiqueta estática, no interactiva, para metadatos y categorías: nivel, duración, producto, dimensión, «Cliente simulado · IA».
Cuándo usarlo
- Metadatos en tarjetas y cabeceras (Avanzada, ~10 min, Mastercard Black).
- Style=glass-light / glass-dark sobre fotos («Cliente simulado · IA» en ClientPortrait); sand sobre superficies de marca; solid por defecto.
Cuándo NO usarlo
- Estados (Logrado, Disponible…) → Badge, que lleva color semántico y punto.
- Algo que el usuario activa o filtra → Chip o FilterChip.
Anatomía
<span> píldora, padding 4/12, texto body/xs en una línea.
Props
| Prop | Figma | Valores | Por defecto |
|---|---|---|---|
label | Label | 1–3 palabras | — |
style | Style | solid · sand · glass-light · glass-dark | solid |
Estados
Sin estados: no es interactiva.
Accesibilidad
- Texto plano, sin rol, no enfocable. Sobre fotos, contraste del texto ≥ 4.5:1 en imágenes claras (en ClientPortrait lo garantiza el fundido navy).
Contenido
Una a tres palabras, sentence case (DV-02).
Errores conocidos
- Ninguno medido. (El 26-oct
glass-darktenía un negro al 30 % sin variable; Zoren decidió crearsurface/glass/black-a30→Alpha/Neutral 100 a30, y el relleno quedó bindeado.)
Changelog
- 2026-10-26 · nace (T-02). Token
surface/glass/black-a30creado en Figma para glass-dark (decisión de Zoren).