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
La superficie principal del badge: colores semánticos sobre variantes solid, soft, outline, ghost, subtle y surface.
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.
Escala y forma
Estado y contadores
Dots de estado, contadores de alertas, badges con icono y pills de metadatos desde la misma primitiva.
Estado y contadores
Filtros removibles
Tags desechables para filtros activos, pills de búsqueda acotada y UIs ligeras de tokens.
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.
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.
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.
Chips de filtro interactivos
Colores de chip
Los nueve acentos integrados sobre un chip, más un toggle bidireccional suelto, una etiqueta removible y un chip deshabilitado — todos fuera de un chip-set.
Colores de chip
selected)