Librería de badges para Angular | ng-hub-ui-badges
Badges semánticos para Angular orientados a estados, contadores y tags removibles, con variables CSS y mixins SCSS públicos para familias de color personalizadas.
Ejemplos interactivos
Explora ejemplos en vivo que muestran cómo se comporta la librería en casos de uso habituales de Angular.
Matriz semántica
Semantic coloursPrimary Secondary Success Danger Warning Info
Visual variantsSolid Soft Outline Ghost Subtle Surface
Escala y forma
SizesXS SM MD LG
ShapesPill Rounded Square
Estado y contadores
Status dots
API gatewayOnline
Review queuePending review
Billing exportsBlocked
Counters 12 5 alerts 42 deployments
Filtros removibles
3 active filters Priority: High Assigned: Me Status: Open
Tematización semántica abierta
Truncado y Tooltip
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
Chips de filtro interactivos
Status (single select) Open Pending Closed
Labels (multiple select) bug feature docs urgent
Colores de chip
Semantic coloursprimary secondary success danger warning info neutral light dark
Standalone toggle (two-way Notifications Removable Disabled notifications: true
selected)