Tag
Etiqueta compacta para clasificar, filtrar o indicar el estado de un elemento. Pueden ser informativas (solo lectura) o dismissibles (el usuario las elimina). 38 variantes en Figma (node 40000831:18821).
Preview
Variantes semánticas
Con ícono de estado
Dismissibles (filtros)
Variantes de color
Success / Brand
Estados completados, activos, éxito
Warning
Estados pendientes, en proceso, en riesgo
Error
Estados fallidos, cancelados, críticos
Info
Información, novedades, actualizaciones
Neutral
Filtros, categorías, clasificaciones sin urgencia
Reglas de uso
Usa tags para clasificar o mostrar el estado de una entidad (visita, gestor, etc.)
Mantén el texto corto — máximo 2-3 palabras
Usa tags dismissibles solo en interfaces de filtrado
Usa el color que refleja la semántica correcta del estado
No pongas más de 3 tags en un mismo elemento de lista
No uses tags como botones de acción — son informativos
No uses tags con textos largos que truncan
No mezcles tags de diferentes semánticas en el mismo grupo
Props API
interface TagProps {
label: string
variant?: 'success' | 'warning' | 'error' | 'info' | 'neutral'
icon?: boolean // Muestra punto de color
dismissible?: boolean // Muestra botón de cierre
onDismiss?: () => void // Callback al hacer dismiss
}
/* Ejemplo de uso */
<Tag label="Visita completada" variant="success" icon />
<Tag label="Zona Norte" variant="neutral" dismissible onDismiss={() => removeFilter('zona')} />