Библиотека кнопок для Angular | ng-hub-ui-buttons

Полная система кнопок для Angular 22 с API на сигналах — стандартные кнопки, FAB, speed dial и overlay-dropdown. Ноль зависимостей, кроме ng-hub-ui-utils.

Последнее обновление 17 авг. 2026 г.

Обзор

Почему команды ищут эту библиотеку

Используйте ng-hub-ui-buttons, когда нужна единая темизируемая экосистема кнопок, покрывающая все паттерны взаимодействия — от встроенного CTA до плавающих overlay-действий — с одним последовательным API на основе Angular Signals.

Установка

npm install ng-hub-ui-buttons

Перейти к

Идеально для

  • основные кнопки призыва к действию
  • плавающие меню действий
  • контекстные dropdown-меню
  • иконочные действия в тулбарах

О библиотеке buttons

ng-hub-ui-buttons — библиотека кнопок без зависимостей для standalone-приложений Angular 22+. Она включает HubButtonComponent — используется как <hub-button> или как атрибут на нативном хосте (<button hubButton>) (пять вариантов × шесть цветов × четыре размера) — HubFabComponent (девять фиксированных позиций), HubSpeedDialComponent и HubDropdownDirective (на основе overlay, работает через OverlayService из ng-hub-ui-utils). Каждое визуальное свойство — это CSS custom property, поэтому вся система темизируется одним переопределением стилей.

Руководства по возможностям

Button Variants

Five visual styles (solid, outline, soft, ghost, link) × six semantic colours with size scale sm–xl.

Примеры:
Button Variants

Button Variants

Element formThe same component as a custom element (<hub-button>) instead of the [hubButton] attribute.

Состояние загрузки

Кнопка в состоянии загрузки показывает анимированный заменяемый SVG-спиннер и становится полностью инертной — aria-busy, нативный disabled, вне порядка табуляции, без двойной отправки.

Примеры:
Состояние загрузки

Состояние загрузки

Свои цвета и варианты

Вход color — открытое множество: зарегистрируйте любой акцент миксином hub-btn-color-rules() или создайте новый вид через hub-btn-variant-rules().

Примеры:
Свои цвета и варианты

Свои цвета и варианты

Floating Action Button

Fixed-position circular button with nine placement presets and optional scroll-collapse behaviour.

Примеры:
Floating Action Button

Floating Action Button

FAB preview area — fixed within this container via CSS containment

Speed Dial

Expandable FAB that reveals a stack of action items. Closes on Escape or backdrop click.

Примеры:
Speed Dial

Speed Dial

Bottom right

Bottom left

Top right

Top left

Overlay Dropdown

Directive-driven dropdown that attaches a template-ref panel to any trigger element via the overlay service.

Примеры:
Overlay Dropdown

Overlay Dropdown

CSS Variable Theming

Every visual detail — size, radius, shadow, colour — is a --hub-btn-* or --hub-dropdown-* custom property.

Примеры:
CSS Variable Theming

CSS Variable Theming

Ключевые возможности

Последние изменения

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.

Связанные библиотеки

ng-hub-ui-modal ng-hub-ui-utils ng-hub-ui-portal