BjBadge

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

Utilisation

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

<template>
  <BjBadge>
    <i class="ri-price-tag-3-line bj-icon bj-icon--sm" aria-hidden="true" />
    En vigueur
  </BjBadge>
  <BjBadge variant="info">Info</BjBadge>
  <BjBadge variant="new" :no-icon="true">Nouveau</BjBadge>
</template>

Variantes

En vigueur

<BjBadge variant="default">
  <i class="ri-price-tag-3-line bj-icon bj-icon--sm" aria-hidden="true" />
  En vigueur
</BjBadge>

Info

<BjBadge variant="info">
  <i class="ri-information-line bj-icon bj-icon--sm" aria-hidden="true" />
  Info
</BjBadge>

Validé

<BjBadge variant="success">
  <i class="ri-checkbox-circle-line bj-icon bj-icon--sm" aria-hidden="true" />
  Validé
</BjBadge>

Attention

<BjBadge variant="warning">
  <i class="ri-error-warning-line bj-icon bj-icon--sm" aria-hidden="true" />
  Attention
</BjBadge>

Refusé

<BjBadge variant="error">
  <i class="ri-close-circle-line bj-icon bj-icon--sm" aria-hidden="true" />
  Refusé
</BjBadge>

Nouveau

<BjBadge variant="new">Nouveau</BjBadge>

Tailles

Compact Taille md

<BjBadge size="sm">
  <i class="ri-price-tag-3-line bj-icon bj-icon--sm" aria-hidden="true" />
  Compact
</BjBadge>
<BjBadge size="md">
  <i class="ri-price-tag-3-line bj-icon bj-icon--sm" aria-hidden="true" />
  Taille md
</BjBadge>

Variantes × tailles

Défaut sm Défaut md Info sm Info md Succès sm Succès md Avert. sm Avert. md Erreur sm Erreur md Nouveau smNouveau md

<BjBadge variant="default" size="sm">
  <i class="ri-price-tag-3-line bj-icon bj-icon--sm" aria-hidden="true" />
  Défaut sm
</BjBadge>
<BjBadge variant="default" size="md">
  <i class="ri-price-tag-3-line bj-icon bj-icon--sm" aria-hidden="true" />
  Défaut md
</BjBadge>
<BjBadge variant="info" size="sm">
  <i class="ri-information-line bj-icon bj-icon--sm" aria-hidden="true" />
  Info sm
</BjBadge>
<BjBadge variant="info" size="md">
  <i class="ri-information-line bj-icon bj-icon--sm" aria-hidden="true" />
  Info md
</BjBadge>
<BjBadge variant="success" size="sm">
  <i class="ri-checkbox-circle-line bj-icon bj-icon--sm" aria-hidden="true" />
  Succès sm
</BjBadge>
<BjBadge variant="success" size="md">
  <i class="ri-checkbox-circle-line bj-icon bj-icon--sm" aria-hidden="true" />
  Succès md
</BjBadge>
<BjBadge variant="warning" size="sm">
  <i class="ri-error-warning-line bj-icon bj-icon--sm" aria-hidden="true" />
  Avert. sm
</BjBadge>
<BjBadge variant="warning" size="md">
  <i class="ri-error-warning-line bj-icon bj-icon--sm" aria-hidden="true" />
  Avert. md
</BjBadge>
<BjBadge variant="error" size="sm">
  <i class="ri-close-circle-line bj-icon bj-icon--sm" aria-hidden="true" />
  Erreur sm
</BjBadge>
<BjBadge variant="error" size="md">
  <i class="ri-close-circle-line bj-icon bj-icon--sm" aria-hidden="true" />
  Erreur md
</BjBadge>
<BjBadge variant="new" size="sm">Nouveau sm</BjBadge>
<BjBadge variant="new" size="md">Nouveau md</BjBadge>

Sans icône

Texte sans pictogramme visible Info sans icône

<BjBadge noIcon>
  <i class="ri-price-tag-3-line bj-icon bj-icon--sm" aria-hidden="true" />
  Texte sans pictogramme visible
</BjBadge>
<BjBadge variant="info" noIcon>
  <i class="ri-information-line bj-icon bj-icon--sm" aria-hidden="true" />
  Info sans icône
</BjBadge>

Avec icône

Défaut Info Succès Attention Erreur Nouveau

<BjBadge variant="default">
  <i class="ri-price-tag-3-line bj-icon bj-icon--sm" aria-hidden="true" />
  Défaut
</BjBadge>
<BjBadge variant="info">
  <i class="ri-information-line bj-icon bj-icon--sm" aria-hidden="true" />
  Info
</BjBadge>
<BjBadge variant="success">
  <i class="ri-checkbox-circle-line bj-icon bj-icon--sm" aria-hidden="true" />
  Succès
</BjBadge>
<BjBadge variant="warning">
  <i class="ri-error-warning-line bj-icon bj-icon--sm" aria-hidden="true" />
  Attention
</BjBadge>
<BjBadge variant="error">
  <i class="ri-close-circle-line bj-icon bj-icon--sm" aria-hidden="true" />
  Erreur
</BjBadge>
<BjBadge variant="new">
  <i class="ri-sparkling-line bj-icon bj-icon--sm" aria-hidden="true" />
  Nouveau
</BjBadge>

Slot par défaut

Texte et icônes (classes bj-icon) passent par le slot par défaut.

Info

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).