BjButton

<script setup>
import { BjButton } from '@flrxnt/dsbj/vue'
</script>

<template>
  <BjButton>Valider</BjButton>
  <BjButton variant="secondary">Annuler</BjButton>
  <BjButton variant="tertiary">Retour</BjButton>
</template>

<BjButton variant="primary">Primaire</BjButton>
<BjButton variant="secondary">Secondaire</BjButton>
<BjButton variant="tertiary">Tertiaire</BjButton>
<BjButton variant="accent">Accent</BjButton>
<BjButton variant="contrast">Contraste</BjButton>

<BjButton size="sm">Petit</BjButton>
<BjButton>Par défaut</BjButton>
<BjButton size="lg">Grand</BjButton>

<!-- Primaire -->
<BjButton variant="primary" size="sm">Primaire sm</BjButton>
<BjButton variant="primary">Primaire md</BjButton>
<BjButton variant="primary" size="lg">Primaire lg</BjButton>
<!-- Secondaire -->
<BjButton variant="secondary" size="sm">Secondaire sm</BjButton>
<BjButton variant="secondary">Secondaire md</BjButton>
<BjButton variant="secondary" size="lg">Secondaire lg</BjButton>
<!-- Tertiaire -->
<BjButton variant="tertiary" size="sm">Tertiaire sm</BjButton>
<BjButton variant="tertiary">Tertiaire md</BjButton>
<BjButton variant="tertiary" size="lg">Tertiaire lg</BjButton>
<!-- Accent -->
<BjButton variant="accent" size="sm">Accent sm</BjButton>
<BjButton variant="accent">Accent md</BjButton>
<BjButton variant="accent" size="lg">Accent lg</BjButton>
<!-- Contraste -->
<BjButton variant="contrast" size="sm">Contraste sm</BjButton>
<BjButton variant="contrast">Contraste md</BjButton>
<BjButton variant="contrast" size="lg">Contraste lg</BjButton>

<BjButton icon variant="primary" size="sm" aria-label="Rechercher sm">
  <i class="ri-search-line" aria-hidden="true" />
</BjButton>
<BjButton icon variant="primary" aria-label="Rechercher md">
  <i class="ri-search-line" aria-hidden="true" />
</BjButton>
<BjButton icon variant="primary" size="lg" aria-label="Rechercher lg">
  <i class="ri-search-line" aria-hidden="true" />
</BjButton>
<BjButton icon variant="secondary" size="sm" aria-label="Secondary sm">
  <i class="ri-search-line" aria-hidden="true" />
</BjButton>
<BjButton icon variant="secondary" aria-label="Secondary md">
  <i class="ri-search-line" aria-hidden="true" />
</BjButton>
<BjButton icon variant="secondary" size="lg" aria-label="Secondary lg">
  <i class="ri-search-line" aria-hidden="true" />
</BjButton>
<BjButton icon variant="tertiary" size="sm" aria-label="Tertiary sm">
  <i class="ri-search-line" aria-hidden="true" />
</BjButton>
<BjButton icon variant="tertiary" aria-label="Tertiary md">
  <i class="ri-search-line" aria-hidden="true" />
</BjButton>
<BjButton icon variant="tertiary" size="lg" aria-label="Tertiary lg">
  <i class="ri-search-line" aria-hidden="true" />
</BjButton>
<BjButton icon variant="accent" size="sm" aria-label="Accent sm">
  <i class="ri-search-line" aria-hidden="true" />
</BjButton>
<BjButton icon variant="accent" aria-label="Accent md">
  <i class="ri-search-line" aria-hidden="true" />
</BjButton>
<BjButton icon variant="accent" size="lg" aria-label="Accent lg">
  <i class="ri-search-line" aria-hidden="true" />
</BjButton>
<BjButton icon variant="contrast" size="sm" aria-label="Contrast sm">
  <i class="ri-search-line" aria-hidden="true" />
</BjButton>
<BjButton icon variant="contrast" aria-label="Contrast md">
  <i class="ri-search-line" aria-hidden="true" />
</BjButton>
<BjButton icon variant="contrast" size="lg" aria-label="Contrast lg">
  <i class="ri-search-line" aria-hidden="true" />
</BjButton>

<BjButton variant="primary" :full="true">Primaire pleine largeur</BjButton>
<BjButton variant="secondary" :full="true">Secondaire pleine largeur</BjButton>
<BjButton variant="tertiary" :full="true">Tertiaire pleine largeur</BjButton>
<BjButton variant="accent" :full="true">Accent pleine largeur</BjButton>
<BjButton variant="contrast" :full="true">Contraste pleine largeur</BjButton>

<BjButton variant="primary" :disabled="true">Primaire</BjButton>
<BjButton variant="secondary" :disabled="true">Secondaire</BjButton>
<BjButton variant="tertiary" :disabled="true">Tertiaire</BjButton>
<BjButton variant="accent" :disabled="true">Accent</BjButton>
<BjButton variant="contrast" :disabled="true">Contraste</BjButton>

<BjButton tag="a" href="#" variant="primary">Primaire</BjButton>
<BjButton tag="a" href="#" variant="secondary">Secondaire</BjButton>
<BjButton tag="a" href="#" variant="tertiary">Tertiaire</BjButton>
<BjButton tag="a" href="#" variant="accent">Accent</BjButton>
<BjButton tag="a" href="#" variant="contrast">Contraste</BjButton>

<BjButton :loading="true">Envoi en cours</BjButton>
<BjButton variant="secondary" :loading="true">Chargement</BjButton>
<BjButton variant="tertiary" :loading="true">Patientez</BjButton>
<BjButton variant="accent" :loading="true">Accent</BjButton>
<BjButton variant="contrast" :loading="true">Contraste</BjButton>
<BjButton size="sm" :loading="true">Petit</BjButton>
<BjButton size="lg" :loading="true">Grand</BjButton>

<BjButton
  variant="accent"
  size="lg"
  icon
  :loading="true"
  aria-label="Envoi en cours"
>
  <i class="ri-send-plane-line" aria-hidden="true" />
</BjButton>

<BjButton variant="secondary">
  <i class="ri-download-line" aria-hidden="true" />
  Télécharger
</BjButton>
<BjButton variant="tertiary">
  Suivant
  <i class="ri-arrow-right-line" aria-hidden="true" />
</BjButton>

<BjButton type="button" @click="onSave">Enregistrer</BjButton>
<BjButton tag="a" href="/compte" @click="onNav">Mon compte</BjButton>