# Bannière (/fr/components/banner)

<!-- agent-signals: reading_time_min: 4 · est_tokens: 1618 · updated: 2026-07-30 -->
Related: [Accordion](/fr/components/accordions.md), [Badge](/fr/components/badge.md), [Encarts](/fr/components/callouts.md), [Cartes](/fr/components/cards.md), [Groupes de code](/fr/components/code-groups.md), [Couleur](/fr/components/color.md)

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>
  <CodeBlockTabs defaultValue="Product announcements" groupId="critical-notices+custom-color+maintenance-notices+product-announcements">
    <CodeBlockTabsList>
      <CodeBlockTabsTrigger value="Product announcements">
        Product announcements
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="Maintenance notices">
        Maintenance notices
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="Critical notices">
        Critical notices
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="Custom color">
        Custom color
      </CodeBlockTabsTrigger>
    </CodeBlockTabsList>

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

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

    <CodeBlockTab value="Critical notices">
      ```json wrap  
      "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
      }
      ```
    </CodeBlockTab>

    <CodeBlockTab value="Custom color">
      ```json wrap  
      "banner": {
        "content": "🎉 Rejoignez-nous à notre conférence annuelle !",
        "color": {
          "light": "#7C3AED",
          "dark": "#5B21B6"
        },
        "dismissible": true
      }
      ```
    </CodeBlockTab>
  </CodeBlockTabs>
</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 [#propriétés]
</div>

<ResponseField name="content" type="string">
  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 [#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
{
  "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 [#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.