VueDsfr

Apparence

Badges - DsfrBadge ​

🌟 Introduction ​

Le DsfrBadge est le super-héros des petites étiquettes ! Ce composant Vue est idéal pour afficher des informations courtes et importantes, comme des catégories, des étiquettes ou des statuts. C'est comme le fromage sur votre pizza : petit mais essentiel !

🏅 La documentation sur le badge sur le DSFR

La story sur le badge sur le storybook de VueDsfr

📐 Structure ​

  • Le composant est un élément p avec la classe fr-badge.
  • Props permettent de modifier l'apparence du badge selon les props : type (), présence d'icône, taille et gestion du texte trop long.
  • Le label est affiché à l'intérieur d'un span, potentiellement avec la prop ellipsis et une taille définie ou maximale pour gérer le texte tronqué.

🛠️ Props ​

NomTypeDéfautObligatoireDescription
type'success' | 'warning' | 'error' | 'info''info'Définit le type de badge et change la couleur du badge en fonction du type.
labelstring✅Le texte à afficher dans le badge.
noIconbooleanfalseSi true, le badge s'affiche sans icône.
smallbooleanfalseSi true, affiche un badge de taille réduite.
ellipsisbooleanfalseSi true, le texte est tronqué avec des points de suspension s'il est trop long.

📝 Exemples d'utilisation ​

vue
<template>
  <DsfrBadge
    type="success"
    label="Approuvé"
  />
</template>
vue
<template>
  <DsfrBadge
    type="info"
    label="Titre peut-être un peu trop long"
    ellipsis
    style="max-width=150px;"
  />
</template>
vue
<script lang="ts" setup>
import DsfrBadge from '../DsfrBadge.vue'
</script>

<template>
  <div class="flex justify-center w-full gap-4">
    <div class="demo-container-col">
      <DsfrBadge
        label="Badge défaut"
      />
      <DsfrBadge
        label="Badge succès"
        type="success"
      />
      <DsfrBadge
        label="Badge danger"
        type="warning"
      />
      <DsfrBadge
        label="Badge erreur"
        type="error"
      />
      <DsfrBadge
        label="Badge info"
        type="info"
      />
      <DsfrBadge
        label="Badge 'none'"
        type="none"
      />
    </div>
    <div class="demo-container-col">
      <DsfrBadge
        label="Badge petit défaut"
        small
      />
      <DsfrBadge
        label="Badge petit succès"
        type="success"
        small
      />
      <DsfrBadge
        label="Badge petit danger"
        type="warning"
        small
      />
      <DsfrBadge
        label="Badge petit erreur"
        type="error"
        small
      />
      <DsfrBadge
        label="Badge petit info"
        type="info"
        small
      />
      <DsfrBadge
        label="Badge petit 'none'"
        type="none"
        small
      />
    </div>
    <div class="demo-container-col">
      <DsfrBadge
        label="Badge avec un titre un petit peu trop long"
        type="info"
        ellipsis
        style="max-width: 200px;"
      />
    </div>
  </div>
</template>
vue
<script setup lang="ts">
import type { DsfrBadgeProps } from './DsfrBadge.types'

export type { DsfrBadgeProps }

withDefaults(defineProps<DsfrBadgeProps>(), {
  type: 'info',
})
</script>

<template>
  <p
    class="fr-badge"
    :class="{
      [`fr-badge--${type}`]: type,
      'fr-badge--no-icon': noIcon,
      'fr-badge--sm': small,
    }"
    :title="ellipsis ? label : undefined"
  >
    <span :class="ellipsis ? 'fr-ellipsis' : ''">
      {{ label }}
    </span>
  </p>
</template>

Voilà, le DsfrBadge est prêt à illuminer vos interfaces comme les lumières de la Tour Eiffel illuminent Paris la nuit. Utilisez-le pour mettre en avant ces petits détails qui font toute la différence. À vos badges, prêts, partez ! 🚀💡