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.