> ## Documentation Index
> Fetch the complete documentation index at: https://adminroletesting-justin-client-exports.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Insignia

> Usa el componente insignia para destacar indicadores de estado, etiquetas de versión o metadata en línea con colores y tooltips personalizables.

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
</div>

<Badge>Insignia</Badge>

```mdx theme={null}
<Badge>Insignia</Badge>
```

<div id="colors">
  ## 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 theme={null}
<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
</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 theme={null}
<Insignia size="xs">Insignia</Insignia>
<Insignia size="sm">Insignia</Insignia>
<Insignia size="md">Insignia</Insignia>
<Insignia size="lg">Insignia</Insignia>
```

<div id="shapes">
  ## Formas
</div>

Elige entre esquinas redondeadas o insignias tipo píldora.

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

```mdx theme={null}
<Insignia shape="rounded">Insignia</Insignia>
<Insignia shape="pill">Insignia</Insignia>
```

<div id="icons">
  ## Iconos
</div>

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

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

```mdx theme={null}
<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
</div>

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

<Badge stroke color="blue">Badge</Badge>
<Badge stroke color="green">Badge</Badge>
<Badge stroke color="orange">Badge</Badge>
<Badge stroke color="red">Badge</Badge>

```mdx theme={null}
<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
</div>

Desactiva los badges para indicar estados inactivos o no disponibles.

<Badge disabled icon="lock" color="gray">Badge</Badge>
<Badge disabled icon="lock" color="blue">Badge</Badge>

```mdx theme={null}
<Insignia disabled icon="lock" color="gray">Insignia</Insignia>
<Insignia disabled icon="lock" color="blue">Insignia</Insignia>
```

<div id="inline-usage">
  ## 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 theme={null}
Esta función requiere una suscripción <Badge color="orange" size="sm">Premium</Badge>.
```

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

Combina varias propiedades para crear estilos personalizados de insignias.

<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>

```mdx theme={null}
<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
</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>