---
titulo: Insignia
resumen: Etiqueta corta de estado, rol o categoría. Once tonos, de la marca y de estado.
estado: produccion
funcion: feedback
nivel: atomo
creado: 2026-10-11
actualizado: 2026-10-11
tokens:
  - 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
relacionados:
  - componentes/aviso
  - fundamentos/color
plataformas:
  web:
    estado: produccion
    superficies:
      - id: portal
        fuente: src/components/ui/badge.tsx
id: componentes/insignia
url: /designloop/componentes/insignia
sync: ok
---

# 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 preview superficie=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 preview superficie=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](/designloop/componentes/boton) pequeño o un enlace.
- **Frases en una insignia:** si necesita más de dos palabras, es un [aviso](/designloop/componentes/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.

# Enlace con producción

| Fuente | Estado | Huella |
| --- | --- | --- |
| `src/components/ui/badge.tsx` | Sincronizado | 1956980cfe9016c2 |
| `tokens.produccion.json` | Sincronizado | — |