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.