BjTag

Composant React pour le tag DSBJ. forwardRef, variantes, taille, élément racine span, lien ou bouton, fermeture optionnelle.

Utilisation

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

export default function App() {
  return (
    <>
      <BjTag variant="default" size="md" as="span">
        Étiquette
      </BjTag>
      <BjTag variant="info" dismissible onDismiss={() => {}}>
        Fermable
      </BjTag>
    </>
  )
}

Aperçu

Étiquette Fermable

Variantes

Les six variantes (default et action inclus).

ÉtiquetteActionInfoSuccèsAttentionErreur

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

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

Tailles

sm et md (défaut).

ÉtiquetteÉtiquette

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

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

Éléments HTML

as="span", as="a" (avec href) ou as="button".

ÉtiquetteAction

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

export default function App() {
  return (
    <>
      <BjTag as="span">Span tag</BjTag>
      <BjTag as="a" href="#tags">
        Link tag
      </BjTag>
      <BjTag as="button" type="button">
        Button tag
      </BjTag>
    </>
  )
}

Tags fermables

dismissible et onDismiss pour chaque variante.

Étiquette Action Info Succès Attention Erreur

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

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

export default function App() {
  return (
    <>
      {variants.map((variant) => (
        <BjTag key={variant} variant={variant} dismissible onDismiss={() => {}}>
          {variant}
        </BjTag>
      ))}
    </>
  )
}

Combinaisons

size="sm" avec dismissible sur chaque variante.

Étiquette Action Info Succès Attention Erreur

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

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

export default function App() {
  return (
    <>
      {variants.map((variant) => (
        <BjTag key={variant} variant={variant} size="sm" dismissible onDismiss={() => {}}>
          {variant} sm
        </BjTag>
      ))}
    </>
  )
}

Callbacks

onDismiss est appelé au clic sur le bouton de fermeture.

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

export default function App() {
  return (
    <BjTag
      variant="info"
      dismissible
      onDismiss={() => {
        console.log('tag dismissed')
      }}
    >
      Closable
    </BjTag>
  )
}

Props

Prop	Description
`variant`	Variante : default (défaut), action, info, success, warning ou error.
`size`	Taille : md (défaut) ou sm.
`dismissible`	Affiche le bouton de retrait à côté du libellé.
`onDismiss`	Callback invoqué au clic sur le bouton de retrait.
`as`	Élément racine : span (défaut), a ou button.