Insignia

Etiqueta corta de estado, rol o categoría. Once tonos, de la marca y de estado.

Badge, en src/components/ui/badge.tsx. Solo existe en el portal.

tsx

import { Badge } from '@/components/ui';

<Badge tone={row.role === 'owner' ? 'sand' : 'neutral'}>{tc(roleLabelKey[row.role])}</Badge>
<Badge tone={factor ? 'success' : 'neutral'}>{factor ? t('mfaStatusOn') : t('mfaStatusOff')}</Badge>
<Badge tone="accent">{t('badgeNext')}</Badge>

Estado

html · portal

<div style="display:flex;flex-wrap:wrap;gap:8px">
<span class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium leading-5 whitespace-nowrap bg-success-soft text-success">Activada</span>
<span class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium leading-5 whitespace-nowrap bg-paper-3 text-ink-2">Desactivada</span>
<span class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium leading-5 whitespace-nowrap bg-accent-soft text-accent">Siguiente</span>
</div>

Rol y personas

html · portal

<div style="display:flex;flex-wrap:wrap;gap:8px">
<span class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium leading-5 whitespace-nowrap bg-sand text-ink">Propietario</span>
<span class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium leading-5 whitespace-nowrap bg-lilac text-ink">Propietario</span>
<span class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium leading-5 whitespace-nowrap bg-paper-3 text-ink-2">Miembro</span>
<span class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium leading-5 whitespace-nowrap bg-paper-3 text-ink-2">Estudio</span>
<span class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium leading-5 whitespace-nowrap border border-line-strong text-ink-2">tú</span>
</div>

Props

Prop	Valores	Por defecto
`tone`	`neutral`, `sand`, `sky`, `clay`, `sage`, `lilac`, `accent`, `danger`, `success`, `warning`, `outline`	`neutral`
`className`	Clases extra	—

Reglas

Regla	Cómo se comprueba
Texto de una o dos palabras, sin punto final.	Los textos salen del diccionario (`mfaStatusOn`, `roleOwner`, `badgeNext`).
Los tonos de estado (`success`, `warning`, `danger`, `accent`) dicen cómo está algo; los de marca (`sand`, `sky`, `clay`, `sage`, `lilac`) distinguen categorías sin juicio.	Rol de propietario en `sand` (equipo) o `lilac` (administración); estado de la verificación en dos pasos en `success` o `neutral`.
`outline` marca a la persona que mira la pantalla.	Se usa para «tú» en la lista del equipo.
No es interactiva.	Es un `<span>` sin enlace ni manejador.

Antipatrones

Insignia como botón: si se pulsa, es un botón pequeño o un enlace.
Frases en una insignia: si necesita más de dos palabras, es un aviso o texto.
Tonos de marca para estados: clay no significa «error» ni sage «correcto».

Diferencias observadas

El rol de propietario usa sand en Ajustes › Equipo y lilac en el panel de administración. Candidato a unificar.

Tokens que usa

--paper-3--ink-2--ink--tile-sand--tile-sky--tile-clay--tile-sage--tile-lilac--accent--accent-soft--danger--danger-soft--success--success-soft--warning--warning-soft--line-strong

Enlace con producción

Superficie	Fuente	Estado	Huella	Revisada en
Portal de clientes	src/components/ui/badge.tsx	Sincronizado	1956980cfe9016c2	61df637

Producción en el commit 455e861 (2026-10-13). Sync del 2026-10-13.

Relacionados

componentes/insignia · Actualizado el 2026-10-11