Brickslab.Toolsv2.1.1

@brickslab./ui-web

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

PropTypeDéfautRequisDescription
variant"info" | "warning" | "tip" | "danger""info"—Variante colorée avec icône associée automatiquement.
titlestring——Titre du callout. Si omis, un titre par défaut est affiché selon la variante.
childrenReact.ReactNode——Corps du message. Peut contenir du texte ou des éléments React.
Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  variant="info"
  title="..."
  children={<span>...</span>}
/>
varianttitlechildren
Override titre/sous-titre: taille + couleur

Exemple cible pour personnaliser la taille et la couleur via les variables CSS (tokens) autour du composant.

<div
  style={{
    "--fontsize-3xl": "2.25rem",
    "--fontsize-xl": "1.125rem",
    "--color-fg": "#111827",
    "--color-muted": "#4B5563",
    "--color-brand": "#CC4A48",
  } as React.CSSProperties}
>
  <MyComponent
    title="Votre titre"
    variant="info"
  />
</div>

Utilisation

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