Badge Components
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