API reference

Here's the full contract for buttons: everything you can bind, listen to, project and theme, gathered in one place. Wire up what you need and style what you want — it's standalone and signal-friendly.

Inputs

Dial buttons in with 34 inputs. Bind them like any Angular @Input.

Name	Type	Default	Description
`variant (hub-button)`	`'solid' \| 'outline' \| 'soft' \| 'ghost' \| 'link'`	`'solid'`	Visual style of the button: solid, outline, soft, ghost or link.
`color (hub-button)`	`'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'neutral' \| 'light' \| 'dark' \| string`	`'primary'`	Semantic accent of the button. Open set: any of the nine built-in accents, a custom accent registered via hub-btn-color-rules(), a CSS named colour, or a literal (#hex, rgb(), oklch(), var(...)). Feeds the --hub-btn-accent slot from which every role colour is derived.
`size (hub-button)`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Size token of the button: sm, md, lg or xl.
`loading (hub-button)`	`boolean`	`false`	Shows the animated spinner and marks the button busy AND disabled: reflects aria-busy="true" and the native disabled attribute, removes it from the tab order and blocks pointer/keyboard activation so an in-flight submit cannot fire twice.
`disabled (hub-button)`	`boolean`	`false`	Disables the button, mirroring the native disabled attribute on the host element.
`color (hub-fab)`	`HubSemanticColor`	`'primary'`	Semantic accent of the FAB background. Accepts the built-in accents or any custom/literal colour via the --hub-fab-accent slot.
`size (hub-fab)`	`'mini' \| 'standard' \| 'large'`	`'standard'`	Diameter of the circular FAB: mini, standard or large.
`extended (hub-fab)`	`boolean`	`false`	Renders the FAB as an extended pill that shows the projected [slot=label] content next to the icon.
`position (hub-fab)`	`'top-start' \| 'top-center' \| 'top-end' \| 'middle-start' \| 'center' \| 'middle-end' \| 'bottom-start' \| 'bottom-center' \| 'bottom-end'`	`'bottom-end'`	Fixed viewport position of the FAB on a nine-slot grid; implemented with CSS logical properties for RTL support.
`collapseOnScroll (hub-fab)`	`boolean`	`false`	When true, an extended FAB collapses to icon-only once the page scrolls beyond 50px.
`disabled (hub-fab)`	`boolean`	`false`	Disables the FAB, applying the hub-fab-disabled appearance.
`color (hub-speed-dial)`	`HubSemanticColor`	`'primary'`	Semantic accent painted on the speed-dial trigger FAB. Accepts the built-in accents or any custom/literal colour.
`size (hub-speed-dial)`	`'mini' \| 'standard' \| 'large'`	`'standard'`	Size of the trigger FAB: mini, standard or large.
`position (hub-speed-dial)`	`HubFabPosition`	`'bottom-end'`	Fixed viewport position of the speed dial on the nine-slot FAB grid.
`direction (hub-speed-dial)`	`'up' \| 'down' \| 'left' \| 'right'`	`'up'`	Direction in which the action items expand from the trigger: up, down, left or right.
`trigger (hub-speed-dial)`	`'click' \| 'hover'`	`'click'`	Interaction that opens the speed dial: click toggles it; hover opens on mouseenter and closes on mouseleave.
`isOpen (hub-speed-dial)`	`boolean (two-way model)`	`false`	Two-way bindable open state of the speed dial (model signal). Pressing Escape closes it automatically.
`icon (hub-speed-dial-item)`Required	`string`	—	CSS class string for the action icon, rendered as <i [class]="icon()"> inside the item button. Also used as the aria-label fallback when no label is set.
`label (hub-speed-dial-item)`	`string`	`''`	Tooltip label shown next to the action button; also used as its accessible aria-label.
`color (hub-speed-dial-item)`	`HubSemanticColor \| 'default'`	`'default'`	Semantic accent of the action button; 'default' keeps the neutral appearance. Custom/literal colours paint through the --hub-speed-dial-item-accent slot.
`disabled (hub-speed-dial-item)`	`boolean`	`false`	Disables the action item button; itemClick is not emitted while disabled.
`hubDropdown ([hubDropdown])`Required	`TemplateRef<any>`	—	The ng-template rendered inside the body-level overlay panel, bound as [hubDropdown]="tpl".
`placement ([hubDropdown])`	`'top-start' \| 'top' \| 'top-end' \| 'start' \| 'end' \| 'bottom-start' \| 'bottom' \| 'bottom-end'`	`'bottom-start'`	Placement of the panel relative to the trigger element; the overlay tries the mapped position and falls back until one fits the viewport.
`trigger ([hubDropdown])`	`'click' \| 'hover'`	`'click'`	Interaction that opens the dropdown: click toggles it; hover opens on mouseenter and closes on mouseleave.
`closeOnSelect ([hubDropdown])`	`boolean`	`true`	When true, any click inside the panel content closes the dropdown automatically.
`disabled ([hubDropdown])`	`boolean`	`false`	Prevents the dropdown from opening.
`offsetY ([hubDropdown])`	`number`	`4`	Offset in pixels between the trigger and the panel along the placement axis.
`panelClass ([hubDropdown])`	`string`	`''`	Extra CSS class added to the overlay panel alongside the default hub-dropdown-overlay class.
`isOpen ([hubDropdown])`	`boolean (two-way model)`	`false`	Two-way bindable open state of the dropdown (model signal). Closes automatically on Escape, click-outside, backdrop click and page scroll.
`color (hub-dropdown-panel)`	`HubSemanticColor \| 'default'`	`'default'`	Semantic accent for the panel top border; 'default' keeps the neutral border.
`color (hub-dropdown-item)`	`HubSemanticColor \| 'default'`	`'default'`	Semantic accent for the item label colour; 'default' inherits the panel colour.
`icon (hub-dropdown-item)`	`string \| undefined`	`undefined`	Optional CSS class string for an icon rendered as <i [class]="icon()"> before the label.
`disabled (hub-dropdown-item)`	`boolean`	`false`	Disables the menu item; clicks are ignored and itemClick is not emitted.
`selected (hub-dropdown-item)`	`boolean`	`false`	Shows a checkmark indicator marking the item as selected.

Outputs

React to what buttons does — 9 events to hook your logic onto.

Name	Type	Description
`fabClick (hub-fab)`	`OutputEmitterRef<void>`	Declared output for FAB activation. The current implementation never emits it internally — bind the native (click) event on <hub-fab> instead.
`isOpenChange (hub-speed-dial)`	`OutputEmitterRef<boolean>`	Emits the new open state whenever the isOpen model changes (two-way binding companion).
`opened (hub-speed-dial)`	`OutputEmitterRef<void>`	Emits after the speed dial opens.
`closed (hub-speed-dial)`	`OutputEmitterRef<void>`	Emits after the speed dial closes, including Escape-key closes.
`itemClick (hub-speed-dial-item)`	`OutputEmitterRef<void>`	Emits when the action item button is activated.
`isOpenChange ([hubDropdown])`	`OutputEmitterRef<boolean>`	Emits the new open state whenever the isOpen model changes (two-way binding companion).
`opened ([hubDropdown])`	`OutputEmitterRef<void>`	Emits after the overlay panel is attached and the dropdown opens.
`closed ([hubDropdown])`	`OutputEmitterRef<void>`	Emits after the dropdown closes and the overlay is disposed (Escape, click-outside, scroll, backdrop or closeOnSelect).
`itemClick (hub-dropdown-item)`	`OutputEmitterRef<void>`	Emits when the menu item is activated; suppressed while the item is disabled.

Templates

No templates documented yet.