Badges
Indicateurs visuels compacts pour signaler un statut, un compteur ou une catégorie.
Badge Examples
All Colors
All Sizes
A Colour Of Its Own
Any CSS colour becomes a wash behind the label and a stronger line around it — never a fill, which would need its ink recomputed for contrast, once per theme, for a colour nobody vouches for.
tint says how much of it washes the plate : a number from 0 to 1, or false for an ordinary plate — the form a dense list wants, where a mark beside the label already carries the colour.
<Badge color={ term.color }>{ term.label }</Badge><Badge color={ term.color } tint={ false }>{ term.label }</Badge>Outline Style
Dash Style
Soft Style
Ghost Style
Combined Styles
Dot Indicators (Empty)
Custom Element (Link)
Practical Use Cases
Status Indicators
Notifications
Tags
Versions
Priority Levels
In Context
Project AlphaActive
PremiumThis is an example of badges used within a card component.
With Icons/Emojis
LabelBadge Examples
Shields.io Style
All Sizes
DaisyUI Colors (right side)
Custom CSS Colors
Style Variants
Custom Label Color
Truncation & Single-sided
Copy badge
Click a badge to copy its value. The glyph turns into a check and the badge borrows the success colour for a moment, then goes back. A failed write turns it red instead.
An empty value renders nothing at all — there is no badge below this line.
Contact badge
The pill acts — it dials, faxes or opens a message — and the button beside it copies. What is shown keeps its separators ; the link keeps only the digits.