BjNotice

Bandeau React : variantes default, info, warning, alert ; titre et icône optionnels ; closable et onClose.

Utilisation

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

export function Example() {
  return (
    <BjNotice
      variant="info"
      closable
      icon="ri-information-line"
      title="Maintenance prévue"
      onClose={() => console.log('closed')}
    >
      Le service sera indisponible dimanche de 2 h à 4 h.
    </BjNotice>
  )
}

Variantes

default

info

Détail info.

warning

Détail warning.

alert

Détail alert.

<BjNotice variant="default">Message neutre.</BjNotice>
<BjNotice variant="info" icon="ri-information-line" title="Info">
  <p>Détail info.</p>
</BjNotice>
<BjNotice variant="warning" icon="ri-alert-line" title="Attention">
  <p>Détail warning.</p>
</BjNotice>
<BjNotice variant="alert" icon="ri-error-warning-line" title="Alerte">
  <p>Détail alert.</p>
</BjNotice>

Icône et titre

Titre + icône

Corps.

Sans icône

Corps.

<BjNotice icon="ri-information-line" title="Titre seul">
  <p>Corps.</p>
</BjNotice>
<BjNotice title="Sans icône">
  <p>Corps.</p>
</BjNotice>

Fermeture (closable)

Maintenance prévue

Le service sera indisponible dimanche de 2 h à 4 h.

<BjNotice variant="info" closable title="Fermable" onClose={() => {}}>
  Contenu
</BjNotice>

Combinaisons

warning + closable + icône

Combinaison complète.

<BjNotice
  variant="warning"
  closable
  icon="ri-alert-line"
  title="Complet"
  onClose={() => {}}
>
  Variante + icône + titre + fermeture.
</BjNotice>

Children

Corps du message (texte ou nœuds React).

<BjNotice variant="info" title="Détail">
  <p>Paragraphe un.</p>
  <p className="bj-text-sm">Paragraphe secondaire.</p>
</BjNotice>

onClose

Utilisez onClose avec closable pour synchroniser l’UI.

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

export function Example() {
  const [open, setOpen] = useState(true)
  if (!open) return null
  return (
    <BjNotice closable variant="alert" title="Erreur" onClose={() => setOpen(false)}>
      Message critique.
    </BjNotice>
  )
}

Props

Prop	Description
`variant`	default (défaut), info, warning ou alert.
`closable`	Affiche le bouton et masque le bandeau au clic.
`title`	Titre au-dessus des children.
`icon`	Classe d’icône à gauche.
`onClose`	Callback après fermeture locale.
`children`	Corps du message (texte ou nœuds React).
`(div props)`	Autres props du div racine.