BjButton

Composant React pour le bouton DSBJ. Utilise forwardRef et des props typées.

Utilisation

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

export default function App() {
  return (
    <>
      <BjButton>Valider</BjButton>
      <BjButton variant="secondary">Annuler</BjButton>
    </>
  )
}

Aperçu

Variantes

Chaque valeur de variant (primary est la base sans modificateur CSS).

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

export default function App() {
  return (
    <>
      <BjButton variant="primary">Primary</BjButton>
      <BjButton variant="secondary">Secondary</BjButton>
      <BjButton variant="tertiary">Tertiary</BjButton>
      <BjButton variant="accent">Accent</BjButton>
      <BjButton variant="contrast">Contrast</BjButton>
    </>
  )
}

Tailles

sm, md (défaut) et lg via la prop size.

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

export default function App() {
  return (
    <>
      <BjButton size="sm">Small</BjButton>
      <BjButton size="md">Medium</BjButton>
      <BjButton size="lg">Large</BjButton>
    </>
  )
}

Variantes × tailles

Toutes les paires variant × size.

smmdlgPrimarySecondaryTertiaryAccentContrast

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

const variants = ['primary', 'secondary', 'tertiary', 'accent', 'contrast'] as const
const sizes = ['sm', 'md', 'lg'] 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) => (
            <BjButton key={size} variant={variant} size={size}>
              {variant} {size}
            </BjButton>
          ))}
        </div>
      ))}
    </div>
  )
}

Bouton icône

Prop icon : bouton carré bj-btn--icon pour chaque variante et taille.

smmdlgPrimarySecondaryTertiaryAccentContrast

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

const variants = ['primary', 'secondary', 'tertiary', 'accent', 'contrast'] as const
const sizes = ['sm', 'md', 'lg'] 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) => (
            <BjButton
              key={size}
              variant={variant}
              size={size}
              icon
              aria-label={`Add ${variant} ${size}`}
            >
              <i className="ri-add-line" aria-hidden />
            </BjButton>
          ))}
        </div>
      ))}
    </div>
  )
}

Pleine largeur

Prop full : classe bj-btn--full pour chaque variante.

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

export default function App() {
  return (
    <div style={{ maxWidth: 280 }}>
      <BjButton full variant="primary" style={{ marginBottom: 8 }}>
        Primary full
      </BjButton>
      <BjButton full variant="secondary" style={{ marginBottom: 8 }}>
        Secondary full
      </BjButton>
      <BjButton full variant="tertiary" style={{ marginBottom: 8 }}>
        Tertiary full
      </BjButton>
      <BjButton full variant="accent" style={{ marginBottom: 8 }}>
        Accent full
      </BjButton>
      <BjButton full variant="contrast">Contrast full</BjButton>
    </div>
  )
}

Désactivé

Attribut disabled natif sur chaque variante.

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

export default function App() {
  return (
    <>
      <BjButton disabled variant="primary">
        Primary
      </BjButton>
      <BjButton disabled variant="secondary">
        Secondary
      </BjButton>
      <BjButton disabled variant="tertiary">
        Tertiary
      </BjButton>
      <BjButton disabled variant="accent">
        Accent
      </BjButton>
      <BjButton disabled variant="contrast">
        Contrast
      </BjButton>
    </>
  )
}

Lien bouton

as="a" avec href : rend une ancre avec les styles bouton.

Ouvrir Externe

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

export default function App() {
  return (
    <>
      <BjButton as="a" href="/dashboard" variant="primary">
        Dashboard
      </BjButton>
      <BjButton as="a" href="https://example.com" variant="secondary" target="_blank" rel="noopener noreferrer">
        External
      </BjButton>
    </>
  )
}

Combinaisons

Exemple combinant accent, lg, icon, loading et aria-label.

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

export default function App() {
  return (
    <BjButton variant="accent" size="lg" icon loading aria-label="Ajouter">
      <i className="ri-add-line" aria-hidden />
    </BjButton>
  )
}

Chargement

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

export default function App() {
  return (
    <>
      <BjButton loading>Envoi en cours</BjButton>
      <BjButton variant="secondary" loading>Chargement</BjButton>
      <BjButton variant="tertiary" loading>Patientez</BjButton>
      <BjButton variant="accent" loading>Accent</BjButton>
      <BjButton variant="contrast" loading>Contraste</BjButton>
      <BjButton size="sm" loading>Petit</BjButton>
      <BjButton size="lg" loading>Grand</BjButton>
    </>
  )
}

Callbacks

Les gestionnaires natifs du bouton ou du lien (ex. onClick) sont transmis via les props HTML.

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

export default function App() {
  return (
    <BjButton
      type="button"
      onClick={() => {
        console.log('clicked')
      }}
    >
      Submit
    </BjButton>
  )
}

Props

Prop	Description
`variant`	Variante visuelle : primary, secondary, tertiary, accent ou contrast.
`size`	Taille : sm, md (défaut) ou lg.
`icon`	Mode bouton carré pour une icône seule (bj-btn--icon).
`full`	Largeur 100 % du conteneur (bj-btn--full).
`loading`	Affiche un spinner et désactive le bouton.
`as`	Élément rendu : button (défaut) ou a pour un lien stylé comme bouton.