Badge
Compact labels for status, counts, and metadata.
Decorative element — no keyboard interaction. Use aria-label when the badge conveys status not available in surrounding text.
$ npm install @bloc-ui/core
Variants
Intent badges
Use colour to communicate context quickly.
Sizing
Small to large
Choose a density that matches the surrounding UI.
Pill count
Useful for compact counters and chips.
In context
Inline with heading
Badge next to a label for a quick count.
Messages3
Button with count
Notification count inside a button.
Status in a list
Indicate state alongside list items.
- Deploy #42
Live - Deploy #41
Failed
Theming
Custom tokens
Override background, text, and border tokens directly.