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.
Última actualización 8 ago 2026
Visión General
Por qué los equipos buscan esta librería
Usa ng-hub-ui-badges cuando tu aplicación Angular necesite etiquetas semánticas compactas, contadores y filtros removibles sin recurrir a spans ad-hoc ni a las clases badge de Bootstrap.
Instalación
npm install ng-hub-ui-badgesIr a
Ideal para
- estados de workflow
- metadatos en tablas y tarjetas
- barras de filtros activos
- contadores de notificaciones
Sobre badges
ng-hub-ui-badges ofrece a los equipos Angular un sistema de badges pequeño pero completo: colores semánticos, múltiples superficies visuales, escalas de tamaño y forma, dots de estado, iconos opcionales y tags desechables. Todo está impulsado por las familias de tokens compartidas `--hub-sys-color-*` y por propiedades personalizadas `--hub-badge-*`, por lo que encaja de forma natural en una base de código orientada a design systems.
Guías de uso
Matriz semántica
La superficie principal del badge: colores semánticos sobre variantes solid, soft, outline, ghost, subtle y surface.
Ejemplos:
Matriz semántica
Matriz semántica
Escala y forma
Tags XS compactos, pills LG más generosos y tres geometrías de carcasa para tablas densas o dashboards amplios.
Ejemplos:
Escala y forma
Escala y forma
Estado y contadores
Dots de estado, contadores de alertas, badges con icono y pills de metadatos desde la misma primitiva.
Ejemplos:
Estado y contadores
Estado y contadores
Filtros removibles
Tags desechables para filtros activos, pills de búsqueda acotada y UIs ligeras de tokens.
Ejemplos:
Filtros removibles
Filtros removibles
Tematización semántica abierta
Los colores integrados leen los tokens compartidos del design system y los acentos personalizados se conectan mediante los mixins SCSS públicos.
Ejemplos:
Tematización semántica abierta
Tematización semántica abierta
Truncado y Tooltip
Las etiquetas largas se recortan con puntos suspensivos y se revelan al pasar el ratón — con el title nativo, o el tooltip de hub-ui si está cableado.
Ejemplos:
Truncado y Tooltip
Truncado y Tooltip
Chips de filtro
Etiquetas hub-chip conmutables coordinadas por hub-chip-set para selección única o múltiple, reutilizando el tematizado de acento del badge.
Ejemplos:
Chips de filtro interactivos
Chips de filtro interactivos
Características clave
Cambios recientes
Version 22.6.1 - 8/8/26, 12:00 AM
fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.
Version 22.6.0 - 7/7/26, 12:00 AM
added: hub-badge-theme(...) mixin — one-call token theming for <hub-badge> / <hub-chip>: accent (drives the shared role family) plus the shell tokens (bg, color, border-color, border-radius, border-width, padding-x/-y, gap, font-size, font-weight). Null-defaulted and additive; the existing variant-registration API (hub-badge-variant-rules / hub-badge-color-rules) stays for registering new named accents. @use 'ng-hub-ui-badges/styles' as *;.
changed: <hub-badge> / <hub-chip> [color] accepts ANY colour. On top of the built-in semantic accents, the input now also accepts a registered custom accent and a literal colour (#ff0000, rgb(...), oklch(...), a CSS named colour), resolved through the shared resolveHubAccent helper (imported from ng-hub-ui-utils): a bareword becomes var(--hub-sys-color-<name>, <name>); a literal is used as-is. The single --hub-<comp>-accent slot derives the rest of the family, so built-in colours are unchanged.
changed: Internal — host bindings moved to the host metadata object. @HostBinding / @HostListener decorators were replaced by the host object in the component/directive metadata (Angular style guide). No public API or behaviour change.
changed: Added ng-hub-ui-utils (>=22.7.0) as a peer dependency (already used at runtime; now declared).
Version 22.5.0 - 7/6/26, 12:00 AM
removed: BREAKING — HubBadgeGroupComponent (<hub-badge-group>) removed. It was a purely presentational flex wrapper whose four inputs (direction / align / gap / wrap) mapped 1:1 to CSS, redundant with the standard flex utilities the library already ships. Arrange badges with <div class="d-flex flex-wrap gap-2"> (add flex-column / align-items-* as needed). The HubBadgeGroupDirection / HubBadgeGroupAlign types and the internal --hub-badge-group-gap / --hub-badge-group-align tokens are gone too.
added: hub-chip + hub-chip-set — interactive filter-chip primitives. hub-chip is a togglable, optionally removable tag that reuses the badge accent contract for its colours (it points the shared --hub-badge-accent slot from its color input and derives every surface from that family via the new hub-badge-accent-family mixin). It exposes selected (two-way model), value, color, disabled, removable, removeLabel inputs and selectedChange / removed / chipClick outputs, projects a leading icon/avatar through [hubChipLeading], and behaves as a role="button" toggle with aria-pressed and Space/Enter support. hub-chip-set groups chips with selectionMode ('single' | 'multiple') and a two-way value model, deselecting siblings in single mode. New tokens: --hub-chip-bg, --hub-chip-color, --hub-chip-border-color, --hub-chip-selected-bg, --hub-chip-selected-color, --hub-chip-hover-bg, --hub-chip-gap, --hub-chip-focus-ring (plus the shell tokens --hub-chip-font-family/-size/-weight, --hub-chip-padding-x/-y, --hub-chip-border-width/-radius, --hub-chip-focus-ring-width, --hub-chip-transition and --hub-chip-set-gap).
added: Interactive badges. New interactive input turns a badge into a role="button" toggle with a keyboard tab stop that emits the new selected output on click / Enter / Space, and an active input toggles the pressed state (.hub-badge--active, aria-pressed) reading the new --hub-badge-active-bg slot. All default-off and additive.
added: Overlay status dot. New dotOverlay input renders the status dot absolutely positioned at a badge corner (distinct from the existing inline leading dot), with a dotPlacement input ('top-end' | 'top-start' | 'bottom-end' | 'bottom-start') and the new --hub-badge-overlay-offset token controlling the corner inset.
added: neutral, light and dark documented as built-in colours. HubBadgeBuiltinColor now lists all nine canonical accents the stylesheet already registers, so the type matches the runtime.
added: Designed bg/fg pair registration. hub-badge-variant-rules($type, $accent, $bg, $fg, $border, $subtle) gained optional $bg / $fg / $border / $subtle overrides: pass any of them to pin the corresponding final slot for a variant; omit them to keep today's runtime derivation. Fully backward compatible.
added: hub-badge-accent-family mixin. Exposes the runtime-derived accent role family (-emphasis / -subtle / -border / -on) as a single shared mixin, now included by both hub-badge and hub-chip so the colour derivation lives in one place.
Version 22.4.1 - 7/2/26, 12:00 AM
fixed: CSS variable fallbacks realigned to the ds light defaults (--hub-ref-font-family-base: inherit → system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif); fallbacks only apply when ng-hub-ui-ds is not loaded.
fixed: Docs: docs/css-variables-reference.md default values resynchronized with the actual code declarations (now guarded by the repo-level tokens-parity check F).
Version 22.4.0 - 6/29/26, 12:00 AM
added: Text truncation with ellipsis, bounded by the new `--hub-badge-max-width` CSS variable.
added: `tooltip` input plus auto tooltip on truncated content (native `title` by default).
added: Optional hub-ui tooltip integration via `provideHubBadgeTooltip(hubTooltipAdapter)` (from ng-hub-ui-utils).
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.