---
title: Encadrés
description: Mettez en évidence les avertissements, conseils et contextes importants sans interrompre le flux de lecture. Six types disponibles.
---

Utilisez les Callouts pour mettre en évidence un contexte important comme des avertissements, des conseils ou des exigences sans interrompre le flux.

## Callouts disponibles

<Note>
**Note** - Contexte utile ou informations supplémentaires. À utiliser pour les conseils qui améliorent la compréhension.
</Note>

<Info>
**Info** - Informations neutres ou faits. À utiliser pour les détails complémentaires.
</Info>

<Tip>
**Tip** - Meilleures pratiques ou optimisations. À utiliser pour les « conseils de pro » qui améliorent l'expérience.
</Tip>

<Warning>
**Warning** - Mises en garde ou exigences importantes. À utiliser quand quelque chose pourrait causer des problèmes si ignoré.
</Warning>

<Danger>
**Danger** - Avertissements critiques. À utiliser pour les actions pouvant entraîner une perte de données ou des problèmes de sécurité.
</Danger>

<Check>
**Check** - Confirmations de succès. À utiliser pour confirmer un comportement correct ou une réalisation réussie.
</Check>

## Utilisation

```mdx
<Note>
This is helpful context for the reader.
</Note>

<Warning>
This could cause issues if you skip this step.
</Warning>

<Danger>
This action cannot be undone. Proceed with caution.
</Danger>
```

## Avec des titres

Ajoutez un titre personnalisé à n'importe quel callout :

```mdx
<Note title="Did you know?">
You can use **Markdown** inside callouts, including `code` and [links](/introduction).
</Note>
```

<Note title="Le saviez-vous ?">
Vous pouvez utiliser **Markdown** dans les callouts, y compris `code` et [des liens](/fr/components/card).
</Note>

## Avec des blocs de code

Les callouts peuvent contenir du code :

<Warning title="Changement incompatible dans la v2.0">
La signature de la fonction `getData()` a changé :

```javascript
// Before (v1.x)
getData(id)

// After (v2.0)
getData({ id, options })
```
</Warning>

## Bonnes pratiques

<AccordionGroup>
  <Accordion title="Utiliser avec parcimonie" icon="hand" defaultOpen>
    Trop de callouts diluent leur impact. Visez 1 à 2 par page maximum.

    Si tout est important, rien n'est important.
  </Accordion>

  <Accordion title="Choisir le bon type" icon="list-check">
    | Scénario | Callout |
    |----------|---------|
    | Conseil utile | `<Tip>` |
    | Contexte supplémentaire | `<Note>` ou `<Info>` |
    | Piège potentiel | `<Warning>` |
    | Action irréversible | `<Danger>` |
    | Confirmation | `<Check>` |
    | Personnalisation | `<Callout>` |
  </Accordion>

  <Accordion title="Rester concis" icon="text-width">
    Les callouts doivent être lisibles en un coup d'œil. Si vous avez besoin de plusieurs paragraphes, envisagez d'utiliser un Accordion à la place.

    **Bien :** Une ou deux phrases
    **À éviter :** Plusieurs paragraphes de texte
  </Accordion>

  <Accordion title="Positionner de façon stratégique" icon="arrows-up-down">
    Placez les callouts :
    - **Avant** le code qui a des exigences
    - **Après** les instructions avec des mises en garde importantes
    - **À proximité** du contenu auquel ils font référence
  </Accordion>
</AccordionGroup>

## Props

Tous les callouts acceptent les mêmes propriétés :

<ParamField name="title" type="string">
  Titre personnalisé (remplace le titre par défaut).
</ParamField>

## Accessibilité

Les callouts sont implémentés avec du HTML sémantique et des rôles ARIA :
- Les lecteurs d'écran annoncent le type de callout
- La couleur n'est pas le seul indicateur (des icônes sont incluses)
- Contraste de couleur suffisant dans les deux thèmes

## Callout personnalisé

Créez des callouts avec des icônes et couleurs personnalisées en utilisant le composant `Callout` :

<Callout icon="key" color="#FFC107">
**Personnalisé** - Utilisez n'importe quelle icône et couleur pour correspondre à votre contenu.
</Callout>

<Callout icon="rocket" color="#9333EA">
Déployez vos modifications en toute confiance grâce à notre pipeline CI/CD.
</Callout>

<Callout icon="regular/star" color="#EC4899">
Utilisez des préfixes de style d'icône comme `regular/`, `light/` ou `duotone/` pour différentes épaisseurs.
</Callout>

### Utilisation du Callout personnalisé

```mdx
<Callout icon="key" color="#FFC107">
  This callout uses a key icon with amber color.
</Callout>

<Callout icon="rocket" color="#9333EA">
  This callout uses a rocket icon with purple color.
</Callout>

<Callout icon="regular/star" color="#EC4899">
  Use style prefixes for different icon weights.
</Callout>
```

### Props du Callout personnalisé

<ParamField name="icon" type="string" default="circle-info">
  Nom de l'icône (voir [Icônes](/fr/content/icons)).
</ParamField>

<ParamField name="color" type="string">
  Code couleur hexadécimal (ex. : `#FFC107`). Par défaut, la couleur d'accentuation.
</ParamField>

**Préfixes de style d'icône :** Ajoutez un préfixe pour changer l'épaisseur de l'icône :
- `solid/` - Icônes pleines (par défaut)
- `regular/` - Icônes en contour
- `light/` - Icônes en contour fin
- `duotone/` - Icônes bicolores

## Et ensuite ?

<Columns cols={2}>
  <Card title="Vue d'ensemble des composants" icon="puzzle-piece" href="/fr/components/overview">
    Parcourir tous les composants disponibles
  </Card>
  <Card title="Bases MDX" icon="file-code" href="/fr/content/mdx-basics">
    Apprendre à utiliser les composants en MDX
  </Card>
</Columns>