BjLink

Composant React pour le lien DSBJ. forwardRef sur une ancre avec classes bj-link et props typées.

Utilisation

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

export default function App() {
  return (
    <>
      <BjLink href="#">Consulter la démarche</BjLink>
      <BjLink href="#" size="sm">
        Petit lien
      </BjLink>
      <BjLink href="#" iconPosition="left">
        <i className="ri-arrow-left-line" aria-hidden />
        Retour
      </BjLink>
    </>
  )
}

Aperçu

Consulter la démarchePetit lien RetourSite externeLien discret (reset)

Tailles

Prop size : sm, md (défaut) et lg.

Lien smLien mdLien lg
import { BjLink } from '@flrxnt/dsbj/react'

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

Icônes

iconPosition left ou right avec une icône Remix en enfant.

RetourSuite 
import { BjLink } from '@flrxnt/dsbj/react'

export default function App() {
  return (
    <>
      <BjLink href="#" iconPosition="left">
        <i className="ri-arrow-left-line" aria-hidden />
        Back
      </BjLink>
      <BjLink href="#" iconPosition="right">
        Next
        <i className="ri-arrow-right-line" aria-hidden />
      </BjLink>
    </>
  )
}

Icônes × tailles

Combinaisons left/right × sm/md/lg.

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

const iconPositions = ['left', 'right'] as const
const sizes = ['sm', 'md', 'lg'] as const

export default function App() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      {iconPositions.map((iconPosition) => (
        <div key={iconPosition} style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {sizes.map((size) => (
            <BjLink key={size} href="#" iconPosition={iconPosition} size={size}>
              {iconPosition === 'left' ? (
                <>
                  <i className="ri-arrow-left-line" aria-hidden />
                  {iconPosition}-{size}
                </>
              ) : (
                <>
                  {iconPosition}-{size}
                  <i className="ri-arrow-right-line" aria-hidden />
                </>
              )}
            </BjLink>
          ))}
        </div>
      ))}
    </div>
  )
}

Reset

reset : classe bj-link--reset pour un lien discret.

Lien discret (reset)
import { BjLink } from '@flrxnt/dsbj/react'

export default function App() {
  return (
    <BjLink href="#" reset>
      Subtle reset link
    </BjLink>
  )
}

Lien externe

Attributs target="_blank" et rel recommandés pour les liens externes.

Site externe
import { BjLink } from '@flrxnt/dsbj/react'

export default function App() {
  return (
    <BjLink href="https://example.com" target="_blank" rel="noopener noreferrer">
      External site
    </BjLink>
  )
}

Callbacks

onClick et autres gestionnaires sont transmis sur l’élément <a>.

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

export default function App() {
  return (
    <BjLink
      href="#"
      onClick={(e) => {
        e.preventDefault()
        console.log('navigate')
      }}
    >
      In-app navigation
    </BjLink>
  )
}

Props

PropDescription
sizeTaille du texte : sm, md (défaut) ou lg.
iconPositionIcône dans le contenu : none (défaut), left ou right.
resetApplique bj-link--reset : couleur héritée, soulignement au survol.