Encadrés

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 - Contexte utile ou informations supplémentaires. À utiliser pour les conseils qui améliorent la compréhension.

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

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

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

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

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

Utilisation

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

<Note title="Did you know?">

You can use **Markdown** inside callouts, including `code` and [links](/introduction).

</Note>

Vous pouvez utiliser Markdown dans les callouts, y compris code et des liens.

Avec des blocs de code

Les callouts peuvent contenir du code :

La signature de la fonction getData() a changé :

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

// After (v2.0)
getData({ id, options })

Bonnes pratiques

Trop de callouts diluent leur impact. Visez 1 à 2 par page maximum.

Si tout est important, rien n'est important.

Scénario	Callout
Conseil utile	`<Tip>`
Contexte supplémentaire	`<Note>` ou `<Info>`
Piège potentiel	`<Warning>`
Action irréversible	`<Danger>`
Confirmation	`<Check>`
Personnalisation	`<Callout>`

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

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

Props

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

string

Titre personnalisé (remplace le titre par défaut).

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 :

Personnalisé - Utilisez n'importe quelle icône et couleur pour correspondre à votre contenu.

Déployez vos modifications en toute confiance grâce à notre pipeline CI/CD.

Utilisez des préfixes de style d'icône comme regular/, light/ ou duotone/ pour différentes épaisseurs.

Utilisation du Callout personnalisé

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

stringdefault: circle-info

Nom de l'icône (voir Icônes).

string

Code couleur hexadécimal (ex. : #FFC107). Par défaut, la couleur d'accentuation.

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 ?

Vue d'ensemble des composants

Parcourir tous les composants disponibles

Bases MDX

Apprendre à utiliser les composants en MDX