BjCallout

Bloc de mise en avant avec couleur de bordure, icône et titre optionnels, slot par défaut pour le texte et slot action pour un bouton ou un lien.

Utilisation

<script setup>
import { BjButton, BjCallout } from '@flrxnt/dsbj/vue'
<\/script>

<template>
  <BjCallout color="yellow" icon="ri-information-line" title="Information">
    Ce bloc attire l’attention sur un message important pour l’utilisateur.
    <template #action>
      <BjButton variant="secondary" size="sm">En savoir plus</BjButton>
    </template>
  </BjCallout>
</template>

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">Message positif.</BjCallout>
<BjCallout color="yellow" icon="ri-alert-line" title="Jaune">Avertissement.</BjCallout>
<BjCallout color="red" icon="ri-error-warning-line" title="Rouge">Message critique.</BjCallout>

Icône et titre

Astuce

Texte avec icône et titre.

Sans icône

Titre sans icône.

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

Slot action

Information

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

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

Combinaisons

Erreur

Combinaison rouge + icône + titre + action.

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

Slot par défaut

Le corps du message est dans le slot par défaut (paragraphes, listes, etc.).

<BjCallout>
  <p>Paragraphe dans le slot par défaut.</p>
  <ul class="bj-text-sm">
    <li>Premier point</li>
    <li>Deuxième point</li>
  </ul>
</BjCallout>

Props

Prop / slot	Description
`color`	default (défaut), green, yellow ou red — accent de bordure gauche.
`icon`	Classe d’icône (ex. Remix) ; si absent, aucune icône.
`title`	Titre au-dessus du texte principal.
`action (slot)`	Slot nommé action : bouton ou lien aligné à droite sur grand écran.