This page features interactive demos and side-by-side code samples that need at least 340 pixels of horizontal space. Please widen your browser window, or rotate your device, to continue.
Component <neo-badge> is a small inline label / chip for status, counts, tags, and category markers. Variants reuse the button colour tokens, which means a theme change restyles badges too.
Default
Variants
With icon
With status dot
As link
Counts
DeactivateRenameDuplicateDelete
The preview routes through the in-browser server simulator. Its current Settings (network latency, a non-200 response, or an unreachable server) are in effect. The live preview can look like it is misbehaving. Adjust them in the Settings panel.
New state Toggle autoplay
New
HTMLCSS
The selected state's markup and its scoped CSS. The CSS is wrapped in <style>@scope { ... }</style> and applies to the preview only. Edits change the preview above, applied live while Sync is on, or when you click Patch or Replace. Patch morphs the preview; Replace swaps it outright.
Signals
Datastar signals declared in the selected state's markup. Change a value to update the preview, applied live while Sync is on, or when you click Patch.
Drop a <neo-icon> as the badge's first child. The flex layout spaces it from the label. The icon inherits the badge's font colour and recolours with the variant.
Short numeric badges next to a label form the unread-count pattern. line-height: 1 keeps them from stretching the row at small font sizes.
Inbox12Mentions3Drafts42Archive128
The badge sits on the text baseline and reads as part of a sentence without pushing surrounding lines apart. New tags roll out weekly and the experimental ones ship behind a beta flag.