Bloc d'information contextuel statique pour enrichir la prose des pages de documentation. Différent d'Alert (interactif, dismissible) — Callout est inline et non-interactif. Disponible en 4 variantes avec icône et titre automatiques.
Variantes
info · warning · tip · danger
Info
Ce composant est contrôlé — passez value et onChange comme props.
Astuce
Privilégiez les tokens CSS (var(--color-brand)) aux couleurs hardcodées.
Attention
La prop onCtaClick est requise si ctaLabel est fourni.
Danger
L'interface de ce composant a changé en v2. Migrez avant la mise à jour.
Titre personnalisé
prop title — remplace le titre par défaut de la variante
sans title (défaut)
Astuce
Le titre "Astuce" est injecté automatiquement.
avec title
Bonne pratique
Utilisez size="sm" pour les callouts dans des colonnes étroites.
Titre seul
children optionnel — titre seul possible
Composant Server Component compatible
Nécessite 'use client'
Props
Prop
Type
Défaut
Requis
Description
variant
"info" | "warning" | "tip" | "danger"
"info"
—
Variante colorée avec icône associée automatiquement.
title
string
—
—
Titre du callout. Si omis, un titre par défaut est affiché selon la variante.
children
React.ReactNode
—
—
Corps du message. Peut contenir du texte ou des éléments React.
Utilisation
tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { Callout } from "@brickslab/ui-web";
// Info (défaut)
<Callout variant="info">
Ce composant est contrôlé — passez value et onChange comme props.
</Callout>
// Astuce avec titre personnalisé
<Callout variant="tip" title="Bonne pratique">
Privilégiez les tokens CSS (var(--color-brand)) aux couleurs hardcodées.
</Callout>
// Attention
<Callout variant="warning">
La prop onCtaClick est requise si ctaLabel est fourni.
</Callout>
// Danger
<Callout variant="danger" title="Breaking change">
L'interface de ce composant a changé en v2. Migrez avant la mise à jour.
</Callout>
