Angular 徽章库 | ng-hub-ui-badges
面向状态、计数器与可移除筛选标签的语义化 Angular 徽章，提供 CSS 变量与公开 SCSS mixin，支持自定义颜色族。
交互式示例
探索实时示例，了解该库在常见 Angular 用例中的表现。
语义矩阵
Semantic coloursPrimary Secondary Success Danger Warning Info
Visual variantsSolid Soft Outline Ghost Subtle Surface
尺寸与形状
SizesXS SM MD LG
ShapesPill Rounded Square
状态与计数
Status dots
API gatewayOnline
Review queuePending review
Billing exportsBlocked
Counters 12 5 alerts 42 deployments
可移除筛选器
3 active filters Priority: High Assigned: Me Status: Open
开放式语义主题
截断与提示
Narrow column — long labels truncate; hover a badge for the full text.Processing invoice export Completed with warnings Completed Waiting for manual approval Explicit tooltip overrides the label, even when it fits:Synced Cap the width per badge with --hub-badge-max-width:A very long capped label
可交互的筛选 chip
Status (single select) Open Pending Closed
Labels (multiple select) bug feature docs urgent
纸片颜色
Semantic coloursprimary secondary success danger warning info neutral light dark
Standalone toggle (two-way Notifications Removable Disabled notifications: true
selected)