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.
Interactive examples
Explore live examples that show how the library behaves in common Angular use cases.
Semantic Matrix
The core badge surface: semantic colours across solid, soft, outline, ghost, subtle and surface variants.
Semantic Matrix
Scale & Shape
Compact XS tags, roomier LG pills and three shell shapes to match dense tables or roomy dashboards.
Scale & Shape
Status & Counters
Status dots, alert counts, icon badges and lightweight metadata pills from the same primitive.
Status & Counters
Removable Filters
Dismissible tags for active filters, scoped search pills and lightweight token UIs.
Removable Filters
Open Semantic Theming
Built-in colours read the shared design-system tokens, while custom accents plug in through the public SCSS mixins.
Open Semantic Theming
Truncation & Tooltip
Long labels are clipped with an ellipsis and revealed on hover — via the native title, or the hub-ui tooltip when wired.
Truncation & Tooltip
Filter chips
Togglable hub-chip tags coordinated by hub-chip-set for single or multiple selection, reusing the badge accent theming.
Interactive filter chips
Chip Colours
The nine built-in accents on a chip, plus a standalone two-way toggle, a removable tag and a disabled chip — all outside a chip-set.
Chip Colours
selected)