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.
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
Características clave
Cambios recientes
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.