> ## Documentation Index
> Fetch the complete documentation index at: https://wiki.another-horizon.eu/llms.txt
> Use this file to discover all available pages before exploring further.

# Badge

> Utilisez des badges pour mettre en avant un statut, des labels ou des metadata, en ligne ou de façon autonome.

Utilisez des badges pour afficher des indicateurs d’état, des labels ou des metadata. Les badges peuvent être utilisés dans le corps du texte ou comme éléments autonomes.

<div id="basic-badge">
  ## Badge simple
</div>

<Badge>Badge</Badge>

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

<div id="colors">
  ## Couleurs
</div>

Les badges proposent plusieurs variantes de couleur pour exprimer différentes significations.

<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">
  ## Tailles
</div>

Les badges sont disponibles en quatre tailles pour s’adapter à la hiérarchie de votre contenu.

<Badge size="xs">Badge</Badge>
<Badge size="sm">Badge</Badge>
<Badge size="md">Badge</Badge>
<Badge size="lg">Badge</Badge>

```mdx theme={null}
<Badge size="xs">Badge</Badge>
<Badge size="sm">Badge</Badge>
<Badge size="md">Badge</Badge>
<Badge size="lg">Badge</Badge>
```

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

Choisissez entre des angles arrondis ou des badges en forme de pilule.

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

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

<div id="icons">
  ## Icônes
</div>

Ajoutez des icônes aux badges pour apporter davantage de contexte.

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

```mdx theme={null}
<Badge icon="circle-check" color="green">Badge</Badge>
<Badge icon="clock" color="orange">Badge</Badge>
<Badge icon="ban" color="red">Badge</Badge>
```

<div id="stroke-variant">
  ## Variante contour
</div>

Utilisez la variante à contour pour un rendu plus subtil.

<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}
<Badge stroke color="blue">Badge</Badge>
<Badge stroke color="green">Badge</Badge>
<Badge stroke color="orange">Badge</Badge>
<Badge stroke color="red">Badge</Badge>
```

<div id="disabled-state">
  ## État désactivé
</div>

Désactivez les badges pour indiquer qu’ils sont inactifs ou indisponibles.

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

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

<div id="inline-usage">
  ## Utilisation en ligne
</div>

Les badges s’intègrent naturellement dans le texte. Par exemple, cette fonctionnalité nécessite un abonnement <Badge color="orange" size="sm">Premium</Badge>, ou bien cet endpoint d’API renvoie un format <Badge color="green" size="sm">JSON</Badge>.

```mdx theme={null}
Cette fonctionnalité nécessite un abonnement <Badge color="orange" size="sm">Premium</Badge>.
```

<div id="combined-properties">
  ## Propriétés combinées
</div>

Combinez plusieurs propriétés pour créer des styles de badge personnalisés.

<Badge icon="star" color="blue" size="lg" shape="pill">Premium</Badge>
<Badge icon="check" stroke color="green" size="sm">Vérifié</Badge>
<Badge icon="badge-alert" color="orange" shape="rounded">Bêta</Badge>

```mdx theme={null}
<Badge icon="star" color="blue" size="lg" shape="pill">Premium</Badge>
<Badge icon="check" stroke color="green" size="sm">Vérifié</Badge>
<Badge icon="badge-alert" color="orange" shape="rounded">Bêta</Badge>
```

<div id="properties">
  ## Propriétés
</div>

<ResponseField name="color" type="string" default="gray">
  Variante de couleur du badge.

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

<ResponseField name="size" type="string" default="md">
  Taille du badge.

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

<ResponseField name="shape" type="string" default="rounded">
  Forme du badge.

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

<ResponseField name="icon" type="string">
  L’icône à afficher.

  Options :

  * nom de l’[icône Font Awesome](https://fontawesome.com/icons)
  * nom de l’[icône Lucide](https://lucide.dev/icons)
  * code SVG (compatible JSX) entouré d’accolades
  * URL vers une icône hébergée en externe
  * chemin vers un fichier d’icône dans votre projet

  Pour des icônes SVG personnalisées :

  1. Convertissez votre SVG à l’aide du [convertisseur SVGR](https://react-svgr.com/playground/).
  2. Collez votre code SVG dans le champ de saisie SVG.
  3. Copiez l’élément complet `<svg>...</svg>` depuis le champ de sortie JSX.
  4. Entourez le code SVG compatible JSX avec des accolades : `icon={<svg ...> ... </svg>}`.
  5. Ajustez `height` et `width` si nécessaire.
</ResponseField>

<ResponseField name="iconType" type="string">
  Le style d’icône [Font Awesome](https://fontawesome.com/icons). Utilisé uniquement avec les icônes Font Awesome.

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

<ResponseField name="stroke" type="boolean" default="false">
  Afficher le badge avec un contour plutôt qu’un fond plein.
</ResponseField>

<ResponseField name="disabled" type="boolean" default="false">
  Afficher le badge dans un état désactivé avec une opacité réduite.
</ResponseField>

<ResponseField name="className" type="string">
  Classes CSS supplémentaires à appliquer au badge.
</ResponseField>