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.
نظرة عامة
لماذا تبحث الفِرَق عن هذه المكتبة
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.
التثبيت
npm install ng-hub-ui-badgesانتقل إلى
مثالي لـ
- workflow statuses
- table and card metadata
- active filter bars
- notification counters
حول 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.
أدلّة الميزات
Semantic Matrix
The core badge surface: semantic colours across solid, soft, outline, ghost, subtle and surface variants.
أمثلة:
Semantic Matrix
Semantic Matrix
Scale & Shape
Compact XS tags, roomier LG pills and three shell shapes to match dense tables or roomy dashboards.
أمثلة:
Scale & Shape
Scale & Shape
Status & Counters
Status dots, alert counts, icon badges and lightweight metadata pills from the same primitive.
أمثلة:
Status & Counters
Status & Counters
Removable Filters
Dismissible tags for active filters, scoped search pills and lightweight token UIs.
أمثلة:
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.
أمثلة:
Open Semantic Theming
Open Semantic Theming
الميزات الرئيسية
التغييرات الأخيرة
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.