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

# Bannière

> Ajoutez une bannière dismissible en haut de votre site de documentation pour afficher des annonces importantes, des notes de version ou des notifications.

Utilisez des bannières pour afficher des annonces, des mises à jour ou des notifications importantes sur l'ensemble de votre site de documentation. Les bannières apparaissent en haut de chaque page, prennent en charge la mise en forme Markdown, et vous pouvez permettre aux utilisateurs de les masquer. Par défaut, les bannières utilisent la couleur définie par la propriété `colors.dark` dans votre `docs.json`. Vous pouvez modifier l'apparence avec la propriété `type` ou remplacer entièrement l'arrière-plan avec `color`.

Pour ajouter une bannière, utilisez la propriété `banner` dans votre `docs.json` :

<CodeGroup>
  ```json Product announcements wrap theme={null}
  "banner": {
    "content": "🚀 La version 2.0 est disponible ! Consultez notre [journal des modifications](/changelog) pour plus de détails.",
    "dismissible": true
  }
  ```

  ```json Maintenance notices wrap theme={null}
  "banner": {
    "content": "⚠️ Maintenance planifiée : l'API sera indisponible le 15 décembre, de 2 h à 4 h UTC",
    "type": "warning",
    "dismissible": false
  }
  ```

  ```json Critical notices wrap theme={null}
  "banner": {
    "content": "**Action requise :** effectuez la rotation de vos clés d'API avant le 1er janvier. [Guide de migration](/migration)",
    "type": "critical",
    "dismissible": true
  }
  ```

  ```json Custom color wrap theme={null}
  "banner": {
    "content": "🎉 Rejoignez-nous à notre conférence annuelle !",
    "color": {
      "light": "#7C3AED",
      "dark": "#5B21B6"
    },
    "dismissible": true
  }
  ```
</CodeGroup>

<Note>
  Vous pouvez également configurer des bannières par langue en définissant `banner` dans `navigation.languages`. Consultez [Bannières propres à chaque langue](#language-specific-banners).
</Note>

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

<ResponseField name="content" type="string" required>
  Le contenu textuel affiché dans la bannière. Prend en charge le formatage MDX de base, y compris les liens, le gras et l'italique. Les composants personnalisés ne sont pas pris en charge.
</ResponseField>

<ResponseField name="dismissible" type="boolean">
  Indique si les utilisateurs peuvent fermer la bannière. Lorsque `true`, un bouton de fermeture apparaît. Si un utilisateur ferme la bannière, elle reste masquée pour lui jusqu'à ce que vous mettiez à jour le contenu de la bannière. Valeur par défaut : `false`.
</ResponseField>

<ResponseField name="type" type="string">
  Le style visuel de la bannière. Contrôle la couleur d'arrière-plan afin que les visiteurs puissent reconnaître rapidement l'urgence du message. Valeur par défaut : `info`.

  * `info` : Utilise la couleur principale de la marque. Idéal pour les annonces de produits et les mises à jour générales.
  * `warning` : Utilise un arrière-plan ambre. Idéal pour les avis de précaution, comme une maintenance planifiée ou des dépréciations à venir.
  * `critical` : Utilise un arrière-plan rouge. Idéal pour les avis urgents nécessitant une attention immédiate, comme des pannes ou des actions requises.
</ResponseField>

<ResponseField name="color" type="object">
  Remplace la couleur d'arrière-plan de la bannière par une valeur hexadécimale personnalisée. Lorsque cette propriété est définie, elle a la priorité sur la couleur impliquée par `type`. Le texte de la bannière est blanc, alors choisissez un arrière-plan suffisamment foncé pour qu'il reste lisible.

  <Expandable title="propriétés de color">
    <ResponseField name="light" type="string">
      Couleur hexadécimale utilisée en mode clair. Si seul `dark` est fourni, il est également utilisé en mode clair.
    </ResponseField>

    <ResponseField name="dark" type="string">
      Couleur hexadécimale utilisée en mode sombre. Si seul `light` est fourni, il est également utilisé en mode sombre.
    </ResponseField>
  </Expandable>
</ResponseField>

<div id="language-specific-banners">
  ## Bannières spécifiques à chaque langue
</div>

Configurez un contenu de bannière différent pour chaque langue de votre documentation. Définissez ces bannières spécifiques à chaque langue dans le tableau `navigation.languages` de votre fichier `docs.json`.

```json theme={null}
{
  "navigation": {
    "languages": [
      {
        "language": "en",
        "banner": {
          "content": "🚀 La version 2.0 est en ligne ! Consultez notre [journal des modifications](/en/changelog) pour plus de détails.",
          "dismissible": true
        },
        "groups": [
          {
            "group": "Premiers pas",
            "pages": ["en/overview", "en/quickstart"]
          }
        ]
      },
      {
        "language": "es",
        "banner": {
          "content": "🚀 ¡La versión 2.0 ya está disponible! Consulta nuestro [registro de cambios](/es/changelog) para más detalles.",
          "dismissible": true
        },
        "groups": [
          {
            "group": "Premiers pas",
            "pages": ["es/overview", "es/quickstart"]
          }
        ]
      }
    ]
  },
  "banner": {
    "content": "🚀 La version 2.0 est en ligne !",
    "dismissible": true
  }
}
```

<div id="fallback-behavior">
  ### Comportement de repli
</div>

Les bannières suivent un ordre de priorité pour déterminer quel contenu afficher :

1. **Bannière spécifique à une langue** : Si la langue actuelle dispose d'une configuration `banner`, celle-ci est prioritaire.
2. **Bannière globale** : Si aucune bannière spécifique à une langue n'existe, la `banner` globale est affichée.