mintlify__docs/fr/components/badge.mdx

---
title: "Badge"
description: "Utilisez des badges pour mettre en avant un statut, des labels ou des metadata, en ligne ou de façon autonome."
keywords: ["badge", "label", "tag", "status", "indicator"]
---

import IconsOptional from "/snippets/fr/icons-optional.mdx";

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

<IconsOptional />

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