Angular Badges Library | ng-hub-ui-badges
Semantic Angular badges for statuses, counters and removable filter tags, with CSS variables and public SCSS mixins for custom colour families.
Overview
Why teams search for this library
Use ng-hub-ui-badges when your Angular application needs compact semantic status labels, counters and dismissible filters without falling back to one-off spans or Bootstrap badge classes.
Install
npm install ng-hub-ui-badgesJump to
Ideal for
- workflow statuses
- table and card metadata
- active filter bars
- notification counters
About badges
ng-hub-ui-badges gives Angular teams a small but complete badge system: semantic colours, multiple visual surfaces, size and shape scales, status dots, optional icons and dismissible tags. Everything is driven by the shared `--hub-sys-color-*` token families and exposed `--hub-badge-*` custom properties, so the component family slots naturally into a design-system-first codebase.
Feature guides
Semantic Matrix
The core badge surface: semantic colours across solid, soft, outline, ghost, subtle and surface variants.
Examples:
Semantic Matrix
Semantic Matrix
Scale & Shape
Compact XS tags, roomier LG pills and three shell shapes to match dense tables or roomy dashboards.
Examples:
Scale & Shape
Scale & Shape
Status & Counters
Status dots, alert counts, icon badges and lightweight metadata pills from the same primitive.
Examples:
Status & Counters
Status & Counters
Removable Filters
Dismissible tags for active filters, scoped search pills and lightweight token UIs.
Examples:
Removable Filters
Removable Filters
Open Semantic Theming
Built-in colours read the shared design-system tokens, while custom accents plug in through the public SCSS mixins.
Examples:
Open Semantic Theming
Open Semantic Theming
Key features
Recent changes
Version 22.0.0 - 6/24/26, 12:00 AM
added: `HubBadgeComponent` with semantic variants, status dots and dismissible mode.
added: `HubBadgeGroupComponent` for wrapped and stacked badge layouts.
added: Public SCSS mixins at `ng-hub-ui-badges/styles` for registering custom semantic colour families.