BjCallout

Bloc de mise en avant React : prop color, icon et title optionnels, children pour le corps, prop action pour un nœud React (bouton, lien).

Utilisation

import { BjButton, BjCallout } from '@flrxnt/dsbj/react'

export function Example() {
  return (
    <BjCallout
      color="yellow"
      icon="ri-information-line"
      title="Information"
      action={<BjButton variant="secondary" size="sm">En savoir plus</BjButton>}
    >
      <p>Ce bloc attire l’attention sur un message important pour l’utilisateur.</p>
    </BjCallout>
  )
}

Couleurs (color)

default

green

Message positif.

yellow

Avertissement.

red

Message critique.

<BjCallout color="default">Défaut</BjCallout>
<BjCallout color="green" icon="ri-checkbox-circle-line" title="Vert">
  <p>Message positif.</p>
</BjCallout>
<BjCallout color="yellow" icon="ri-alert-line" title="Jaune">
  <p>Avertissement.</p>
</BjCallout>
<BjCallout color="red" icon="ri-error-warning-line" title="Rouge">
  <p>Message critique.</p>
</BjCallout>

Icône et titre

Astuce

Texte avec icône et titre.

Sans icône

Titre seul.

<BjCallout icon="ri-lightbulb-line" title="Astuce">
  <p>Texte avec icône et titre.</p>
</BjCallout>
<BjCallout title="Sans icône">
  <p>Titre seul.</p>
</BjCallout>

Prop action

Information

Ce bloc attire l’attention sur un message important pour l’utilisateur.

<BjCallout
  color="green"
  title="OK"
  icon="ri-checkbox-circle-line"
  action={<BjButton variant="secondary" size="sm">Détails</BjButton>}
>
  Opération réussie.
</BjCallout>

Combinaisons

Erreur

Combinaison rouge + icône + titre + action.

<BjCallout
  color="red"
  icon="ri-alarm-warning-line"
  title="Erreur"
  action={<BjButton variant="secondary" size="sm">Corriger</BjButton>}
>
  <p>Combinaison rouge + icône + titre + action.</p>
</BjCallout>

Children

Le contenu principal est passé en children ; si absent, seuls titre / action peuvent apparaître.

<BjCallout>
  <p>Paragraphe.</p>
  <ul className="bj-text-sm">
    <li>Premier point</li>
    <li>Deuxième point</li>
  </ul>
</BjCallout>

Props

Prop	Description
`color`	default (défaut), green, yellow ou red.
`icon`	Classe Remix affichée à gauche si fournie.
`title`	Titre au-dessus des children.
`action`	Nœud React rendu dans bj-callout__btn (ex. BjButton).
`children`	Le contenu principal est passé en children ; si absent, seuls titre / action peuvent apparaître.