# Insignia (/es/components/badge)

<!-- agent-signals: reading_time_min: 6 · est_tokens: 3131 · updated: 2026-07-30 -->
Related: [Accordions](/es/components/accordions.md), [Banner](/es/components/banner.md), [Avisos](/es/components/callouts.md), [Tarjetas](/es/components/cards.md), [Grupos de código](/es/components/code-groups.md), [Color](/es/components/color.md)

Usa insignias para mostrar indicadores de estado, label o metadata. Coloca las insignias en línea dentro del texto o como elementos independientes.

<div id="basic-badge">
  ## Insignia básica [#insignia-básica]
</div>

<Badge>
  Insignia
</Badge>

```mdx
<Badge>Insignia</Badge>
```

<div id="colors">
  ## Colores [#colores]
</div>

Los badges admiten distintas variantes de color para transmitir significados diferentes.

<Badge color="gray">
  Badge
</Badge>

<Badge color="blue">
  Badge
</Badge>

<Badge color="green">
  Badge
</Badge>

<Badge color="yellow">
  Badge
</Badge>

<Badge color="orange">
  Badge
</Badge>

<Badge color="red">
  Badge
</Badge>

<Badge color="purple">
  Badge
</Badge>

<Badge color="white">
  Badge
</Badge>

<Badge color="surface">
  Badge
</Badge>

<Badge color="white-destructive">
  Badge
</Badge>

<Badge color="surface-destructive">
  Badge
</Badge>

```mdx
<Badge color="gray">Badge</Badge>
<Badge color="blue">Badge</Badge>
<Badge color="green">Badge</Badge>
<Badge color="yellow">Badge</Badge>
<Badge color="orange">Badge</Badge>
<Badge color="red">Badge</Badge>
<Badge color="purple">Badge</Badge>
<Badge color="white">Badge</Badge>
<Badge color="surface">Badge</Badge>
<Badge color="white-destructive">Badge</Badge>
<Badge color="surface-destructive">Badge</Badge>
```

<div id="sizes">
  ## Tamaños [#tamaños]
</div>

Las insignias están disponibles en cuatro tamaños para adaptarse a la jerarquía de tu contenido.

<Badge size="xs">
  Insignia
</Badge>

<Badge size="sm">
  Insignia
</Badge>

<Badge size="md">
  Insignia
</Badge>

<Badge size="lg">
  Insignia
</Badge>

```mdx
<Insignia size="xs">Insignia</Insignia>
<Insignia size="sm">Insignia</Insignia>
<Insignia size="md">Insignia</Insignia>
<Insignia size="lg">Insignia</Insignia>
```

<div id="shapes">
  ## Formas [#formas]
</div>

Elige entre esquinas redondeadas o insignias tipo píldora.

<Badge shape="rounded">
  Insignia
</Badge>

<Badge shape="pill">
  Insignia
</Badge>

```mdx
<Insignia shape="rounded">Insignia</Insignia>
<Insignia shape="pill">Insignia</Insignia>
```

<div id="icons">
  ## Iconos [#iconos]
</div>

Añade iconos a las insignias para aportar más contexto.

<Badge icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M8 12.5L10 14.5L15.5 9.5&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" color="green">
  Insignia
</Badge>

<Badge icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><circle cx=&#x22;12&#x22; cy=&#x22;12&#x22; r=&#x22;10&#x22; stroke=&#x22;currentColor&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M12 8V12L14 14&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" color="orange">
  Insignia
</Badge>

<Badge icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M6 6L18 18&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" color="red">
  Insignia
</Badge>

```mdx
<Insignia icon="circle-check" color="green">Insignia</Insignia>
<Insignia icon="clock" color="orange">Insignia</Insignia>
<Insignia icon="ban" color="red">Insignia</Insignia>
```

<div id="stroke-variant">
  ## Variante de contorno [#variante-de-contorno]
</div>

Usa la variante de contorno para un aspecto más sutil.

<Badge color="blue">
  Badge
</Badge>

<Badge color="green">
  Badge
</Badge>

<Badge color="orange">
  Badge
</Badge>

<Badge color="red">
  Badge
</Badge>

```mdx
<Insignia stroke color="blue">Insignia</Insignia>
<Insignia stroke color="green">Insignia</Insignia>
<Insignia stroke color="orange">Insignia</Insignia>
<Insignia stroke color="red">Insignia</Insignia>
```

<div id="disabled-state">
  ## Estado deshabilitado [#estado-deshabilitado]
</div>

Desactiva los badges para indicar estados inactivos o no disponibles.

<Badge icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z&#x22; stroke=&#x22;currentColor&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M12 13C13.1046 13 14 12.1046 14 11C14 9.89543 13.1046 9 12 9C10.8954 9 10 9.89543 10 11C10 12.1046 10.8954 13 12 13ZM12 13L12 16&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" color="gray">
  Badge
</Badge>

<Badge icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z&#x22; stroke=&#x22;currentColor&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M12 13C13.1046 13 14 12.1046 14 11C14 9.89543 13.1046 9 12 9C10.8954 9 10 9.89543 10 11C10 12.1046 10.8954 13 12 13ZM12 13L12 16&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" color="blue">
  Badge
</Badge>

```mdx
<Insignia disabled icon="lock" color="gray">Insignia</Insignia>
<Insignia disabled icon="lock" color="blue">Insignia</Insignia>
```

<div id="inline-usage">
  ## Uso en línea [#uso-en-línea]
</div>

Las insignias se integran de forma natural en el contenido de texto. Por ejemplo, esta función requiere una suscripción <Badge color="orange" size="sm">Premium</Badge>, o este endpoint de la API devuelve el formato <Badge color="green" size="sm">JSON</Badge>.

```mdx
Esta función requiere una suscripción <Badge color="orange" size="sm">Premium</Badge>.
```

<div id="combined-properties">
  ## Propiedades combinadas [#propiedades-combinadas]
</div>

Combina varias propiedades para crear estilos personalizados de insignias.

<Badge icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M13.7276 3.44418L15.4874 6.99288C15.7274 7.48687 16.3673 7.9607 16.9073 8.05143L20.0969 8.58575C22.1367 8.92853 22.6167 10.4206 21.1468 11.8925L18.6671 14.3927C18.2471 14.8161 18.0172 15.6327 18.1471 16.2175L18.8571 19.3125C19.417 21.7623 18.1271 22.71 15.9774 21.4296L12.9877 19.6452C12.4478 19.3226 11.5579 19.3226 11.0079 19.6452L8.01827 21.4296C5.8785 22.71 4.57865 21.7522 5.13859 19.3125L5.84851 16.2175C5.97849 15.6327 5.74852 14.8161 5.32856 14.3927L2.84884 11.8925C1.389 10.4206 1.85895 8.92853 3.89872 8.58575L7.08837 8.05143C7.61831 7.9607 8.25824 7.48687 8.49821 6.99288L10.258 3.44418C11.2179 1.51861 12.7777 1.51861 13.7276 3.44418Z&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" color="blue" size="lg" shape="pill">
  Premium
</Badge>

<Badge icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M5 13.2592L7.58583 15.9568C8.2525 16.6523 8.58583 17.0001 9.00004 17.0001C9.41425 17.0001 9.74759 16.6523 10.4143 15.9568L19 7.00006&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" color="green" size="sm">
  Verificado
</Badge>

<Badge icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M14.3942 3.00083L14.1481 2.79115C12.9103 1.73628 11.0897 1.73628 9.85189 2.79115L9.60584 3.00083C8.96518 3.54679 8.16862 3.87674 7.32956 3.9437L7.00731 3.96941C5.38613 4.09878 4.09878 5.38613 3.96941 7.00731L3.9437 7.32956C3.87674 8.16862 3.54679 8.96518 3.00083 9.60584L2.79115 9.85189C1.73628 11.0897 1.73628 12.9103 2.79115 14.1481L3.00083 14.3942C3.54679 15.0348 3.87674 15.8314 3.9437 16.6704L3.96941 16.9927C4.09878 18.6139 5.38613 19.9012 7.00731 20.0306L7.32956 20.0563C8.16862 20.1233 8.96518 20.4532 9.60584 20.9992L9.85188 21.2089C11.0897 22.2637 12.9103 22.2637 14.1481 21.2089L14.3942 20.9992C15.0348 20.4532 15.8314 20.1233 16.6704 20.0563L16.9927 20.0306C18.6139 19.9012 19.9012 18.6139 20.0306 16.9927L20.0563 16.6704C20.1233 15.8314 20.4532 15.0348 20.9992 14.3942L21.2089 14.1481C22.2637 12.9103 22.2637 11.0897 21.2089 9.85188L20.9992 9.60584C20.4532 8.96518 20.1233 8.16862 20.0563 7.32956L20.0306 7.00731C19.9012 5.38613 18.6139 4.09878 16.9927 3.96941L16.6704 3.9437C15.8314 3.87674 15.0348 3.54679 14.3942 3.00083Z&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M12 8V12&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M12.125 15.75H12M12.25 15.75C12.25 15.8881 12.1381 16 12 16C11.8619 16 11.75 15.8881 11.75 15.75C11.75 15.6119 11.8619 15.5 12 15.5C12.1381 15.5 12.25 15.6119 12.25 15.75Z&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" color="orange" shape="rounded">
  Beta
</Badge>

```mdx
<Badge icon="star" color="blue" size="lg" shape="pill">Premium</Badge>
<Badge icon="check" stroke color="green" size="sm">Verificado</Badge>
<Badge icon="badge-alert" color="orange" shape="rounded">Beta</Badge>
```

<div id="properties">
  ## Propiedades [#propiedades]
</div>

<ResponseField name="color" type="string" default="gray">
  Variante de color de la insignia.

  Opciones: `gray`, `blue`, `green`, `yellow`, `orange`, `red`,
  `purple`, `white`, `surface`, `white-destructive`, `surface-destructive`.
</ResponseField>

<ResponseField name="size" type="string" default="md">
  Tamaño de la insignia.

  Opciones: `xs`, `sm`, `md`, `lg`.
</ResponseField>

<ResponseField name="shape" type="string" default="rounded">
  Forma de la insignia.

  Opciones: `rounded`, `pill`.
</ResponseField>

<ResponseField name="icon" type="string">
  El ícono que se mostrará.

  Opciones:

  * Nombre del ícono de [Font Awesome](https://fontawesome.com/icons), si tienes la [propiedad](/es/organize/settings#param-icons) `icons.library` configurada como `fontawesome` en tu `docs.json`
  * Nombre del ícono de [Lucide](https://lucide.dev/icons), si tienes la [propiedad](/es/organize/settings#param-icons) `icons.library` configurada como `lucide` en tu `docs.json`
  * Nombre del ícono de [Tabler](https://tabler.io/icons), si tienes la [propiedad](/es/organize/settings#param-icons) `icons.library` configurada como `tabler` en tu `docs.json`
  * URL de un ícono alojado externamente
  * Ruta a un archivo de ícono en tu proyecto
  * Código SVG envuelto entre llaves

  Para íconos SVG personalizados:

  1. Convierte tu SVG con el [convertidor de SVGR](https://react-svgr.com/playground/).
  2. Pega tu código SVG en el campo de entrada de SVG.
  3. Copia el elemento completo `<svg>...</svg>` del campo de salida de JSX.
  4. Envuelve el código SVG compatible con JSX entre llaves: `icon={<svg ...> ... </svg>}`.
  5. Ajusta `height` y `width` según sea necesario.
</ResponseField>

<ResponseField name="iconType" type="string">
  El estilo de ícono de [Font Awesome](https://fontawesome.com/icons). Solo se usa con íconos de Font Awesome.

  Opciones: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ResponseField>

<ResponseField name="stroke" type="boolean" default="false">
  Mostrar la insignia con un contorno en lugar de un fondo sólido.
</ResponseField>

<ResponseField name="disabled" type="boolean" default="false">
  Mostrar la insignia en estado inhabilitado con opacidad reducida.
</ResponseField>

<ResponseField name="className" type="string">
  Clases CSS adicionales para aplicar a la insignia.
</ResponseField>