Angular Button Library | ng-hub-ui-buttons

Complete Angular 22 button system with signal-based API — standard buttons, FAB, speed dial and overlay dropdown. Zero dependencies beyond ng-hub-ui-utils.

Interactive examples

Explore live examples that show how the library behaves in common Angular use cases.

Button Variants

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

Floating Action Button

FAB preview area — fixed within this container via CSS containment

Speed Dial

Bottom right

Bottom left

Top right

Top left

Overlay Dropdown

Placement that gives way

Same markup, both writing directions.
INV-1041Aurora Labs€ 1.240,00
INV-1042Bluewave€ 380,50
INV-1043Corvus Group€ 2.115,90
INV-1044Delta Foods€ 640,00
INV-1045Everline€ 95,00
INV-1046Fairmont Co.€ 3.780,25
INV-1047Granite SL€ 512,40
INV-1048Helios Media€ 1.998,00
INV-1049Ionia Tech€ 74,90
INV-1050Juniper Bay€ 860,00
INV-1051Kestrel Print€ 1.405,00
INV-1052Lumen Estudio€ 220,75
INV-1053Marbella Sur€ 4.060,00
INV-1054Nordic Craft€ 318,20
INV-1055Orión Data€ 2.740,00
INV-1056Pampa Logística€ 149,99
INV-1057Quintana Vinos€ 985,40
INV-1058Ribera Obras€ 6.310,00
INV-1059Solmar Naútica€ 430,00
INV-1060Tramontana€ 1.077,60

Open the menu on a row near the top and it appears below the button; open it on one of the last rows, hard against the bottom of the window, and the identical markup puts it above. placement is a preference, not an instruction: the panel goes where it was asked whenever it fits, and flips across the edge it would have overflowed when it does not. Scroll the box with a menu open and the panel follows its trigger and re-decides on the way. The measuring code that worked out top-end for the bottom rows in your own product can be deleted.

CSS Variable Theming

Loading & busy state

Custom colours & variants

One dropdown at a time

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.