UserBadge

Badge de role utilisateur avec icone, gradient colore et tooltip. Chaque type de badge a une couleur et une icone distincte.

Note : Le composant reel utilise useTranslations() pour les labels i18n et Tooltip au survol. Les mockups ci-dessous reproduisent le rendu visuel.

Types de badges

Createurcreator

Partenairepartner

Supportersupporter

Recruteurrecruiter

Ambassadeurambassador

Fondateurfounder

Editeureditor

Tailles

Createursm

Createurmd

Createurlg

Avec et sans label

showLabel=false (defaut)

SupportershowLabel=true

Utilisation

import { UserBadge } from "@/components/ui/user-badge"

// Badge simple (icone seule, tooltip au survol)
<UserBadge badgeType="creator" />

// Avec label visible
<UserBadge badgeType="partner" showLabel />

// Tailles
<UserBadge badgeType="supporter" size="sm" />
<UserBadge badgeType="supporter" size="md" />
<UserBadge badgeType="supporter" size="lg" />

// Avec className personnalise
<UserBadge badgeType="founder" className="ml-2" />

Exemple en contexte

Utilisation typique a cote d'un nom d'utilisateur dans un profil ou un classement.

Thomas

Lucas

Emma

Reference des types

Type	Apercu	Icone	Couleur	Special
creator	Createur	Crown	yellow/orange	—
partner	Partenaire	Handshake	blue/indigo	—
supporter	Supporter	Heart	pink/rose	—
recruiter	Recruteur	Users	green/emerald	—
ambassador	Ambassadeur	Award	purple/violet	—
founder	Fondateur	Sparkles	amber/yellow/orange	animate-pulse
editor	Editeur	SquarePen	cyan/sky	—

Props

Prop	Type	Default	Description
badgeType	"creator" \| "partner" \| "supporter" \| "recruiter" \| "ambassador" \| "founder" \| "editor"	—	Type de badge determinant l'icone, la couleur et le label.
size	"sm" \| "md" \| "lg"	"sm"	Taille du badge. sm = 16px, md = 20px, lg = 24px.
showLabel	boolean	false	Affiche le label texte a cote de l'icone. Le label est masque sur mobile (hidden sm:inline).
className	string	—	Classes CSS additionnelles.

Dependances

Dependance	Raison
useTranslations()	Hook i18n pour les labels traduits (fr/en).
Tooltip	Affiche le nom du badge au survol.
Badge	Composant de base avec variant="outline".