Badge

Les badges sont utilisés pour afficher des statuts, des étiquettes ou des notifications de manière concise. Notre système supporte différentes combinaisons d'éléments visuels (point, icône, bouton, image, etc.).

1. Badge Simple & Couleurs

La couleur, la taille et la variante (forme) sont les props de base.

Formes (Variant)

pill-color

Fully rounded badge with background color.

<Badge variant="pill-color">pill-color</Badge>

color

Rectangular badge with slightly rounded corners.

<Badge variant="color">color</Badge>

modern

Rectangular badge with a subtle shadow (modern style).

<Badge variant="modern">modern</Badge>

Tailles (Size)

Badge smBadge mdBadge lg

<Badge size="sm|md|lg">Badge</Badge>

Couleurs (Color)

graybranderrorwarningsuccessblue

<Badge color="gray|brand|error|warning|success|blue">Color</Badge>

2. Composants Complexes

Ces composants utilisent la même API de base mais encapsulent des éléments spécifiques pour un usage plus riche.

BadgeWithDot (Statut)

En LigneEn AttenteHors Ligne

<BadgeWithDot color="success">En Ligne</BadgeWithDot>
<BadgeWithDot color="warning" variant="color">En Attente</BadgeWithDot>
<BadgeWithDot color="error" size="md">Hors Ligne</BadgeWithDot>

BadgeWithIcon

ProfilTéléchargerPayé

<BadgeWithIcon leftIcon={UserIcon} color="blue">Profil</BadgeWithIcon>
<BadgeWithIcon rightIcon={ArrowDown} variant="color">Télécharger</BadgeWithIcon>
<BadgeWithIcon leftIcon={ShieldDollar} variant="modern">Payé</BadgeWithIcon>

BadgeWithFlag / BadgeWithImage

France

Utilisateur

<BadgeWithFlag flag="FR">France</BadgeWithFlag>
<BadgeWithImage imgSrc="/images/avatar-1.png">Utilisateur</BadgeWithImage>

BadgeWithButton (Jetons/Filtres)

Filtre: UrgentErreur #233

<BadgeWithButton color="warning" onButtonClick={handleRemove}>Filtre: "Urgent"</BadgeWithButton>

BadgeIcon (Icône seule)

<BadgeIcon icon={Settings} color="gray" size="md" />
<BadgeIcon icon={Mail} color="brand" size="md" />
<BadgeIcon icon={Globe01} color="success" size="md" variant="color" />

BadgeGroup (Badge avec Addon)

Badge composite avec un élément addon (compteur, action) et alignement configurable.

Light Theme

New featureWe've just released a new feature


<BadgeGroup
    addonText="New feature"
    color="gray"
    theme="light"
    align="left"
    size="md"
>
    {"We've just released a new feature"}
</BadgeGroup>

ErrorThere was a problem with that action


<BadgeGroup
    addonText="Error"
    color="error"
    theme="light"
    align="left"
    size="md"
>
    There was a problem with that action
</BadgeGroup>

Just to let you know this might be a problemWarning


<BadgeGroup
    addonText="Warning"
    color="warning"
    theme="light"
    align="right"
    size="lg"
>
    Just to let you know this might be a problem
</BadgeGroup>

You've updated your profile and detailsSuccess


<BadgeGroup
    addonText="Success"
    color="success"
    theme="light"
    align="right"
    size="lg"
>
    {"You've updated your profile and details"}
</BadgeGroup>

Modern Theme

New featureWe've just released a new feature


<BadgeGroup
    addonText="New feature"
    color="gray"
    theme="modern"
    align="left"
    size="md"
>
    {"We've just released a new feature"}
</BadgeGroup>

New featureWe've just released a new feature


<BadgeGroup
    addonText="New feature"
    color="brand"
    theme="modern"
    align="left"
    size="md"
>
    {"We've just released a new feature"}
</BadgeGroup>

There was a problem with that actionError


<BadgeGroup
    addonText="Error"
    color="error"
    theme="modern"
    align="right"
    size="lg"
>
    {"There was a problem with that action"}
</BadgeGroup>

You've updated your profile and detailsSuccess


<BadgeGroup
    addonText="Success"
    color="success"
    theme="modern"
    align="right"
    size="lg"
>
    {" You've updated your profile and details"}
</BadgeGroup>

API Reference

Component	Props	Type	Description
Universal Props (valid for all badges):
All	variant?	'pill-color' \| 'color' \| 'modern'	Badge shape/style variant.
All	color?	'gray' \| 'brand' \| 'error' \| 'warning' \| 'success' \| 'blue'	The badge thematic color.
All	size?	'sm' \| 'md' \| 'lg'	The badge size.
All	asChild?	boolean	Allows using a different component as the root element.
Variant-Specific Props:
BadgeWithIcon	iconLeading?	IconComponentType	Icon displayed before the text.
BadgeWithIcon	iconTrailing?	IconComponentType	Icon displayed after the text.
BadgeIcon	icon	IconComponentType	Central icon (required).
BadgeWithFlag	flag?	FlagTypes	Country code to display a flag (e.g., "FR").
BadgeWithImage	imgSrc	string	URL of the image (avatar, logo) to display.
BadgeWithButton	onButtonClick?	MouseEventHandler	Click handler for the removal button.
BadgeWithButton	buttonLabel?	string	(Accessible) label for the button.
BadgeGroup	addonText	string \| ReactNode	Content of the addon section (required).
BadgeGroup	theme?	'light' \| 'modern'	Visual theme of the badge group.
BadgeGroup	align?	'left' \| 'right'	Position of the addon section.
BadgeGroup	rightIcon?	IconComponentType \| ReactNode	Optional trailing icon.