Badges
Indicateurs visuels compacts pour signaler un statut, un compteur ou une catégorie.
Badge Examples
All Colors
DefaultNeutralPrimarySecondaryAccentInfoSuccessWarningError
All Sizes
XSSMMD (default)LGXL
Outline Style
NeutralPrimarySecondaryAccentInfoSuccessWarningError
Dash Style
NeutralPrimarySecondaryAccentInfoSuccessWarningError
Soft Style
NeutralPrimarySecondaryAccentInfoSuccessWarningError
Ghost Style
DefaultNeutralPrimarySecondaryAccentInfoSuccessWarningError
Combined Styles
3 errors2 warnings✓ Activeℹ Info
Dot Indicators (Empty)
Online
Away
Offline
Inactive
Custom Element (Link)
Practical Use Cases
Status Indicators
PublishedDraftRejectedUnder ReviewArchived
Notifications
Tags
ReactNext.jsTypeScriptTailwindCSSDaisyUI
Versions
v2.0.0betaalphadeprecated
Priority Levels
HighMediumLowNone
In Context
Project AlphaActive
PremiumThis is an example of badges used within a card component.
ReactTypeScript
With Icons/Emojis
✓ Completed✗ Failed⚠ Warningℹ Info⭐ Featured🔥 Hot🎉 New
LabelBadge Examples
Shields.io Style
npmv0.6.1downloads9.6klicenseMPL-2.0
All Sizes
sizexssizesmsizemdsizelgsizexl
DaisyUI Colors (right side)
colorneutralcolorprimarycolorsecondarycoloraccentcolorinfocolorsuccesscolorwarningcolorerror
Custom CSS Colors
buildpassingcoverage98% stars1.2khotoklch(0.7 0.2 30)
Style Variants
stylesolidstylesoftstyleoutline
stylesolidstylesoftstyleoutline
stylesolidstylesoftstyleoutline
Custom Label Color
statusonlineenvprodtierpro
warnchecklightondarkoff
branchmainbranchdevciqueued
Truncation & Single-sided
repoBcommeBois/oihana-next-ui/tree/main/src/componentsbranchfeature/label-badge-accessibility-and-truncation
value onlylabel onlyoutline single