Callouts
Découvrez comment utiliser Note, Tip, Warning, Danger, Check et le composant Callout personnalisé pour mettre en avant des informations clés.
Utilisez les Callouts pour mettre en avant des informations importantes comme des avertissements, des conseils ou des exigences sans interrompre le flux de lecture.
Callouts disponibles
Note - Contexte utile ou informations complémentaires. À utiliser pour des conseils qui améliorent la compréhension.
Info - Informations ou faits neutres. À utiliser pour des détails supplémentaires.
Tip - Bonnes pratiques ou optimisations. À utiliser pour des « astuces de pro » qui améliorent l'expérience.
Warning - Mises en garde ou exigences importantes. À utiliser lorsqu'un élément ignoré pourrait poser problème.
Danger - Avertissements critiques. À utiliser pour des actions pouvant entraîner une perte de données ou des problèmes de sécurité.
Check - Confirmations de réussite. À 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 à l'intérieur des callouts, y compris du 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.
Réservez les callouts aux informations que le lecteur ne doit absolument pas manquer.
| Scénario | Callout |
|---|---|
| Conseil utile | <Tip> |
| Contexte supplémentaire | <Note> ou <Info> |
| Piège potentiel | <Warning> |
| Action irréversible | <Danger> |
| Confirmation | <Check> |
| Personnalisation de la marque | <Callout> |
Les callouts doivent être faciles à parcourir. Si vous avez besoin de plusieurs paragraphes, envisagez plutôt d'utiliser un Accordion.
À privilégier : une ou deux phrases À éviter : plusieurs paragraphes de texte
Placez les callouts :
- Avant un code comportant des exigences
- Après des instructions comportant des mises en garde importantes
- Près du contenu auquel ils se rapportent
Props
Tous les callouts acceptent les mêmes propriétés :
Titre personnalisé (remplace celui 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 des couleurs personnalisées à l'aide du composant Callout :
Custom - 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 graisses.
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é
Nom de l'icône (voir Icônes).
Code couleur hexadécimal (par exemple, #FFC107). Utilise la couleur d'accentuation par défaut.
Préfixes de style d'icône : Ajoutez un préfixe pour modifier la graisse de l'icône :
solid/- Icônes pleines (par défaut)regular/- Icônes contouréeslight/- Icônes fines contouréesduotone/- Icônes bicolores