Библиотека кнопок для Angular | ng-hub-ui-buttons
Полная система кнопок для Angular 22 с API на сигналах — стандартные кнопки, FAB, speed dial и overlay-dropdown. Ноль зависимостей, кроме ng-hub-ui-utils.
Последнее обновление 3 сент. 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
<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
Speed Dial
Expandable FAB that reveals a stack of action items. Closes on Escape or backdrop click.
Примеры:
Speed Dial
Speed Dial
Overlay Dropdown
Directive-driven dropdown that attaches a template-ref panel to any trigger element via the overlay service.
Примеры:
Overlay Dropdown
Overlay Dropdown
Только одно меню за раз
Открытие любого меню закрывает то, что уже было открыто, независимо от способа открытия. Закрытие по клику снаружи работало лишь там, где клик был; меню, открытое из кода, оставляло обе панели.
Примеры:
Только одно меню за раз
Только одно меню за раз
Click this box, open a menu, then press 1, 2 or 3. A keypress opens the menu from code with no click anywhere — the case the click-outside rule never covered.
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.11.0 - 9/3/26, 12:00 AM
fixed: <button hubButton disabled> compiles. `disabled` and `loading` were plain input(false) with no transform, so the bare HTML spelling of a boolean attribute — which passes the empty string — failed with TS2322, on exactly the usage `disabled`'s own documentation promises to mirror. Both use booleanAttribute now.
Version 22.10.0 - 9/1/26, 12:00 AM
added: hubActionsAdapter, so a host library can have its row actions drawn with this library button and dropdown without either package depending on the other. The same arrangement hubFormControlAdapter already uses for a table inputs: the host describes what a row offers in neutral terms and this maps the description onto the real components. Register it where the host expects it, for ng-hub-ui-paginable: provideHubPaginableActions(hubActionsAdapter).
added: hub-actions-cell, the component that adapter creates. Public because creating a component is the honest way to assemble hubDropdown: it needs a host element and an ng-template, which is natural in a template and awkward imperatively.
fixed: Only one dropdown is open at a time, however it was opened. Closing on click-outside already made a second one usually replace the first, since opening it is itself a click outside the first. Usually is not a guarantee: a dropdown opened from code produces no such click, and both panels stayed up.
fixed: A click on a row action no longer reaches whatever surrounds it. Drawn inside a clickable row, such as a table row that opens a detail page, pressing an action navigated away and the action own effect was lost with the screen it happened on.
Version 22.9.4 - 9/1/26, 12:00 AM
changed: The homepage in the manifest points at this library own documentation page rather than at the site root. Metadata only.
Version 22.9.3 - 8/17/26, 12:00 AM
fixed: The published package declared no licence. An absent license field is not neutral: a registry reports it as unlicensed, which legally reads as all rights reserved. The intent was always MIT; it is now stated in package.json and carried in a LICENSE file that ships with the package.
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.