BjAlert

Alerte React avec variantes sémantiques, taille compacte, titre optionnel, fermeture optionnelle et callback onClose ; le conteneur définit role="alert".

Utilisation

import { BjAlert } from '@flrxnt/dsbj/react'

export function Example() {
  return (
    <BjAlert variant="success" title="Succès">
      Votre dossier a été enregistré.
    </BjAlert>
  )
}

Variantes

Information

Votre session expirera dans 5 minutes.

Succès

Votre dossier a été enregistré.

Attention

Vérifiez les champs avant de valider.

Erreur

La soumission a échoué. Réessayez.

<BjAlert variant="info" title="Information">Message info.</BjAlert>
<BjAlert variant="success" title="Succès">Message succès.</BjAlert>
<BjAlert variant="warning" title="Attention">Message avertissement.</BjAlert>
<BjAlert variant="error" title="Erreur">Message erreur.</BjAlert>

Tailles

Alerte compacte.

Taille par défaut.

<BjAlert variant="warning" size="sm" title="Compact">Alerte sm.</BjAlert>
<BjAlert variant="warning" size="md" title="Par défaut">Alerte md.</BjAlert>

Variantes × tailles

success sm

…

error sm

…

success md

…

error md

…

<BjAlert variant="success" size="sm" title="sm">Corps sm.</BjAlert>
<BjAlert variant="success" title="md">Corps md.</BjAlert>
<BjAlert variant="error" size="sm" title="sm">Erreur sm.</BjAlert>
<BjAlert variant="error" title="md">Erreur md.</BjAlert>

Titre et fermeture

Fermable

Cette alerte peut être masquée par l’utilisateur.

<BjAlert variant="info" title="À lire" closable onClose={() => console.log('closed')}>
  Contenu important pour l’utilisateur.
</BjAlert>

Contenu (children)

Passez le message principal en children (texte ou éléments React).

<BjAlert variant="warning">
  <p>Paragraphe dans children.</p>
  <p className="bj-text-sm">Ligne secondaire.</p>
</BjAlert>

Callback onClose

Utilisez onClose pour synchroniser un état externe, envoyer une analytics ou retirer l’alerte d’une liste.

import { useState } from 'react'
import { BjAlert } from '@flrxnt/dsbj/react'

export function Example() {
  const [open, setOpen] = useState(true)
  if (!open) return null
  return (
    <BjAlert closable variant="info" onClose={() => setOpen(false)}>
      Fermez pour mettre à jour l’état parent.
    </BjAlert>
  )
}

Props

Prop	Description
`variant`	info (défaut), success, warning ou error.
`size`	md (défaut) ou sm.
`closable`	Affiche le bouton de fermeture et masque le bloc après fermeture.
`title`	Titre au-dessus du contenu enfant.
`onClose`	Invoqué après la fermeture locale (avec closable).
`children`	Passez le message principal en children (texte ou éléments React).
`(div props)`	Attributs div natifs supplémentaires (sauf children et title).