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.
Übersicht
Warum Teams nach dieser Bibliothek suchen
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.
Installieren
npm install ng-hub-ui-badgesSpringen zu
Ideal für
- workflow statuses
- table and card metadata
- active filter bars
- notification counters
Über 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.
Funktionsleitfäden
Semantic Matrix
The core badge surface: semantic colours across solid, soft, outline, ghost, subtle and surface variants.
Beispiele:
Semantic Matrix
Semantic Matrix
Scale & Shape
Compact XS tags, roomier LG pills and three shell shapes to match dense tables or roomy dashboards.
Beispiele:
Scale & Shape
Scale & Shape
Status & Counters
Status dots, alert counts, icon badges and lightweight metadata pills from the same primitive.
Beispiele:
Status & Counters
Status & Counters
Removable Filters
Dismissible tags for active filters, scoped search pills and lightweight token UIs.
Beispiele:
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.
Beispiele:
Open Semantic Theming
Open Semantic Theming
Hauptfunktionen
Letzte Änderungen
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.