# Encarts (/fr/components/callouts)

<!-- agent-signals: reading_time_min: 2 · est_tokens: 937 · updated: 2026-07-30 -->
Related: [Accordion](/fr/components/accordions.md), [Badge](/fr/components/badge.md), [Bannière](/fr/components/banner.md), [Cartes](/fr/components/cards.md), [Groupes de code](/fr/components/code-groups.md), [Couleur](/fr/components/color.md)

Présentez les encarts sous forme de Note, Avertissement, Info, Conseil, Check, Danger, ou créez votre propre encart :

<Note>
  Ajoute une note dans le contenu
</Note>

```mdx
<Note>Ajoute une note dans le contenu</Note>
```

<Warning>
  Cela génère un avertissement à prendre en compte
</Warning>

```mdx
<Warning>Cela génère un avertissement à prendre en compte</Warning>
```

<Info>
  Met en avant des informations importantes
</Info>

```mdx
<Info>Met en avant des informations importantes</Info>
```

<Tip>
  Voici un conseil utile
</Tip>

```mdx
<Tip>Voici un conseil utile</Tip>
```

<Check>
  Cela nous donne un statut validé
</Check>

```mdx
<Check>Cela nous donne un statut validé</Check>
```

<Danger>
  Ceci est une alerte de danger
</Danger>

```mdx
<Danger>Ceci est une alerte de danger</Danger>
```

<Callout icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M15.5 14.5C18.8137 14.5 21.5 11.8137 21.5 8.5C21.5 5.18629 18.8137 2.5 15.5 2.5C12.1863 2.5 9.5 5.18629 9.5 8.5C9.5 9.38041 9.68962 10.2165 10.0303 10.9697L2.5 18.5V21.5H5.5V19.5H7.5V17.5H9.5L13.0303 13.9697C13.7835 14.3104 14.6196 14.5 15.5 14.5Z&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M17.5 6.5L16.5 7.5&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" color="#FFC107" iconType="regular">
   C’est un encadré personnalisé
</Callout>

```mdx wrap
<Callout icon="key" color="#FFC107" iconType="regular">Ceci est un encadré personnalisé</Callout>
```

<div id="custom-callout-properties">
  ## Propriétés d'encart personnalisé [#propriétés-dencart-personnalisé]
</div>

Le composant générique `Callout` prend en charge les icônes et couleurs personnalisées. Les encarts typés (`Note`, `Warning`, `Info`, `Tip`, `Check`, `Danger`) utilisent des icônes et couleurs prédéfinies et n'acceptent que `children`.

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

  Options:

  * [Font Awesome](https://fontawesome.com/icons) nom d’icône, si vous avez la propriété `icons.library` [paramètres](/fr/organize/settings#param-icons) définie sur `fontawesome` dans votre `docs.json`
  * [Lucide](https://lucide.dev/icons) nom d’icône, si vous avez la propriété `icons.library` [paramètres](/fr/organize/settings#param-icons) définie sur `lucide` dans votre `docs.json`
  * [Tabler](https://tabler.io/icons) nom d’icône, si vous avez la propriété `icons.library` [paramètres](/fr/organize/settings#param-icons) définie sur `tabler` dans votre `docs.json`
  * URL vers une icône hébergée en externe
  * Chemin vers un fichier d’icône dans votre projet
  * Code SVG entouré d’accolades

  Pour les icônes SVG personnalisées:

  1. Convertissez votre SVG avec le [convertisseur SVGR](https://react-svgr.com/playground/).
  2. Collez votre code SVG dans le champ d’entrée SVG.
  3. Copiez l’élément complet `<svg>...</svg>` depuis le champ de sortie JSX.
  4. Enveloppez le code SVG compatible JSX dans des accolades : `icon={<svg ...> ... </svg>}`.
  5. Ajustez `height` et `width` selon vos besoins.
</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="color" type="string">
  Couleur personnalisée sous forme de code hexadécimal (par exemple, `#FFC107`). Définit la bordure, la teinte de fond et la couleur du texte de l'encart.
</ResponseField>