BjBadge

Composant React pour le badge DSBJ. Rend un span avec classes bj-badge et variantes sémantiques.

Utilisation

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

export default function App() {
  return (
    <>
      <BjBadge>
        <i className="ri-price-tag-3-line bj-icon bj-icon--sm" aria-hidden />
        En vigueur
      </BjBadge>
      <BjBadge variant="info">Info</BjBadge>
      <BjBadge variant="new" noIcon>
        Nouveau
      </BjBadge>
    </>
  )
}

Aperçu

En vigueur Info Validé Attention RefuséNouveau Compact Nouveau

Variantes

Les six variantes sémantiques.

En vigueur Info Validé Attention Refusé Nouveau

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

export default function App() {
  return (
    <>
      <BjBadge variant="default">Default</BjBadge>
      <BjBadge variant="info">Info</BjBadge>
      <BjBadge variant="success">Success</BjBadge>
      <BjBadge variant="warning">Warning</BjBadge>
      <BjBadge variant="error">Error</BjBadge>
      <BjBadge variant="new">New</BjBadge>
    </>
  )
}

Tailles

sm (compact) et md (défaut).

Compact En vigueur

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

export default function App() {
  return (
    <>
      <BjBadge size="sm">Small badge</BjBadge>
      <BjBadge size="md">Medium badge</BjBadge>
    </>
  )
}

Variantes × tailles

Grille 6×2 : chaque variante en sm et md.

smmdEn vigueurEn vigueurEn vigueurInfoInfoInfoValidéValidéValidéAttentionAttentionAttentionRefuséRefuséRefuséNouveauNouveauNouveau

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

const variants = ['default', 'info', 'success', 'warning', 'error', 'new'] as const
const sizes = ['sm', 'md'] as const

export default function App() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {variants.map((variant) => (
        <div key={variant} style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {sizes.map((size) => (
            <BjBadge key={size} variant={variant} size={size}>
              {variant} {size}
            </BjBadge>
          ))}
        </div>
      ))}
    </div>
  )
}

Sans icône

noIcon masque les .bj-icon enfants tout en conservant le texte.

En vigueur Info Validé Attention Refusé Nouveau

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

const variants = ['default', 'info', 'success', 'warning', 'error', 'new'] as const

export default function App() {
  return (
    <>
      {variants.map((variant) => (
        <BjBadge key={variant} variant={variant} noIcon>
          <i className="ri-price-tag-3-line bj-icon bj-icon--sm" aria-hidden />
          {variant} (icon hidden)
        </BjBadge>
      ))}
    </>
  )
}

Avec icône

Chaque variante avec une icône Remix en enfant.

En vigueur Info Validé Attention Refusé Nouveau

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

export default function App() {
  return (
    <>
      <BjBadge variant="default">
        <i className="ri-price-tag-3-line bj-icon bj-icon--sm" aria-hidden />
        Default
      </BjBadge>
      <BjBadge variant="info">
        <i className="ri-information-line bj-icon bj-icon--sm" aria-hidden />
        Info
      </BjBadge>
      <BjBadge variant="success">
        <i className="ri-checkbox-circle-line bj-icon bj-icon--sm" aria-hidden />
        Success
      </BjBadge>
      <BjBadge variant="warning">
        <i className="ri-error-warning-line bj-icon bj-icon--sm" aria-hidden />
        Warning
      </BjBadge>
      <BjBadge variant="error">
        <i className="ri-close-circle-line bj-icon bj-icon--sm" aria-hidden />
        Error
      </BjBadge>
      <BjBadge variant="new">
        <i className="ri-sparkling-line bj-icon bj-icon--sm" aria-hidden />
        New
      </BjBadge>
    </>
  )
}

Callbacks

Les attributs HTML du span (ex. onClick) sont transmis si besoin.

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

export default function App() {
  return (
    <BjBadge
      variant="info"
      role="button"
      tabIndex={0}
      onClick={() => {
        console.log('badge click')
      }}
    >
      Clickable badge
    </BjBadge>
  )
}

Props

Prop	Description
`variant`	Variante : default (défaut), info, success, warning, error ou new.
`size`	Taille : md (défaut) ou sm.
`noIcon`	Masque les icônes enfants avec la classe bj-icon (bj-badge--no-icon).