Librería de botones para Angular | ng-hub-ui-buttons
Sistema completo de botones para Angular 22 con API basada en signals — botones estándar, FAB, speed dial y dropdown overlay. Sin dependencias externas más allá de ng-hub-ui-utils.
Última actualización 17 ago 2026
Visión General
Por qué los equipos buscan esta librería
Usa ng-hub-ui-buttons cuando necesites un ecosistema de botones unificado y personalizable que cubra todos los patrones de interacción con una API coherente basada en Angular Signals.
Instalación
npm install ng-hub-ui-buttonsIr a
Ideal para
- botones de llamada a la acción
- menús de acción flotantes
- menús contextuales dropdown
- acciones en barra de herramientas
Sobre buttons
ng-hub-ui-buttons es una librería de botones sin dependencias para aplicaciones Angular 22+ standalone. Incluye HubButtonComponent — usable como <hub-button> o como atributo sobre un host nativo (<button hubButton>) (cinco variantes × seis colores × cuatro tamaños) — HubFabComponent (nueve posiciones fijas), HubSpeedDialComponent y HubDropdownDirective.
Guías de uso
Variantes de botón
Cinco estilos (solid, outline, soft, ghost, link) × seis colores semánticos con escala sm–xl.
Ejemplos:
Variantes de botón
Variantes de botón
<hub-button>) instead of the [hubButton] attribute.Estado loading / ocupado
Un botón en carga muestra un spinner SVG animado e intercambiable y queda totalmente inerte — aria-busy, disabled nativo, fuera del tab-order, sin doble envío.
Ejemplos:
Estado loading / ocupado
Estado loading / ocupado
Colores y variantes personalizados
El input color es un conjunto abierto: registra cualquier acento con el mixin hub-btn-color-rules(), o crea una apariencia nueva con hub-btn-variant-rules().
Ejemplos:
Colores y variantes personalizados
Colores y variantes personalizados
Botón de acción flotante
Botón circular en posición fija con nueve posiciones y opción de colapso al hacer scroll.
Ejemplos:
Botón de acción flotante
Botón de acción flotante
Speed Dial
FAB expandible que muestra una pila de acciones. Se cierra con Escape o click fuera.
Ejemplos:
Speed Dial
Speed Dial
Dropdown overlay
Directiva que adjunta un panel template-ref a cualquier elemento desencadenador mediante el overlay service.
Ejemplos:
Dropdown overlay
Dropdown overlay
Variables CSS
Cada detalle visual — tamaño, radio, sombra, color — es una propiedad --hub-btn-* o --hub-dropdown-*.
Ejemplos:
Variables CSS
Variables CSS
Características clave
Cambios recientes
Version 22.9.2 - 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.9.1 - 7/26/26, 12:00 AM
fixed: Declared the real ng-hub-ui-utils peer range (>=22.7.0); the previous >=1.0.0 floor resolved to a utils major without resolveHubAccent.
Version 22.8.0 - 7/5/26, 12:00 AM
added: The typed color API now also accepts neutral, light and dark (the CSS already shipped), so <hub-button color="neutral"> — and fab/speed-dial/dropdown — type-check.
added: Overridable hover + a new pressed (:active) state via --hub-btn-hover-bg/-border/-color and --hub-btn-active-bg/-border/-color — retune one interaction colour with a single line; existing visuals preserved.
added: The element form <hub-button> is now keyboard-accessible: it advertises role="button", a focusable tabindex and activates on Enter/Space; the [hubButton] attribute form on a native button/anchor stays free of redundant role/tabindex.
Version 22.5.0 - 6/30/26, 12:00 AM
changed: `HubBtnComponent` renamed to `HubButtonComponent` (the old name stays as a deprecated alias).
changed: `HubButtonComponent` now has a dual selector `hub-button, [hubButton]` — usable as `<hub-button>` or as an attribute on a native host (`<button hubButton>` / `<a hubButton>`), with the loading spinner rendered in both forms.
deprecated: `HubBtnDirective` is replaced by `HubButtonComponent` (which now matches `[hubButton]`); it remains exported as a deprecated alias.
Version 22.2.0 - 6/23/26, 12:00 AM
changed: `HubBtnComponent` selector renamed from `hub-btn` to `hub-button`.
changed: `HubBtnDirective` selector renamed from `[hubBtn]` to `[hubButton]`.
fixed: `peerDependencies`: `ng-hub-ui-utils` corrected to `>=1.0.0` to match its actual published versioning scheme.
Version 22.1.0 - 6/23/26, 12:00 AM
added: Public SCSS mixin API at `ng-hub-ui-buttons/styles`: `hub-btn-variant-rules()` generic primitive and `hub-btn-color-rules()` convenience mixin for registering custom semantic colors without modifying the library.
added: `hub-fab-color()`, `hub-dropdown-panel-color()`, `hub-dropdown-item-color()` and their `*-rules` counterparts for extending FAB and dropdown colors.
added: `HubDropdownDirective`: panel closes automatically on scroll to keep alignment with the trigger.
changed: `HubSpeedDialComponent`: trigger slot renamed from `slot="trigger"` to `hubTrigger` attribute.
changed: `HubSpeedDialItemComponent` and `HubDropdownItemComponent`: `icon` input now expects a CSS class string rendered via `<i [class]="icon()">` instead of raw text.
fixed: `HubFabComponent`: uses `position: static` when nested inside `HubSpeedDialComponent` instead of `position: fixed`.
Version 22.0.0 - 6/17/26, 12:00 AM
added: `HubBtnComponent` and `HubBtnDirective` with five variants, six colours, four sizes, loading and icon-only modes.
added: `HubFabComponent` with nine-position grid, scroll-collapse and CSS logical properties for RTL.
added: `HubSpeedDialComponent` and `HubSpeedDialItemComponent` with two-way `isOpen` model and Escape close.
added: `HubDropdownDirective` with eight placements, click/hover triggers, `closeOnSelect` and backdrop close.
added: `HubDropdownPanelComponent`, `HubDropdownItemComponent`, `HubDropdownDividerComponent`, `HubDropdownHeaderComponent` helper components.
added: SCSS token system: `:where()` zero-specificity defaults + `@each` semantic colour loops for all variants.