Библиотека бейджей для Angular | ng-hub-ui-badges
Семантические бейджи Angular для статусов, счётчиков и удаляемых тегов фильтров, с CSS-переменными и публичными SCSS-миксинами для собственных цветовых семейств.
Интерактивные примеры
Изучите живые примеры, показывающие, как библиотека ведёт себя в типичных сценариях использования 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
Интерактивные чипы-фильтры
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)