Referencia API

Aquí tienes el contrato completo de buttons: todo lo que puedes enlazar, escuchar, proyectar y personalizar, reunido en un solo sitio. Enlaza lo que necesites y dale el estilo que quieras — es standalone y reactivo con signals.

Inputs

Ajusta buttons a tu gusto con 35 inputs. Se enlazan como cualquier @Input de Angular.

Nombre	Tipo	Por defecto	Descripción
`variant (hub-button)`	`'solid' \| 'outline' \| 'soft' \| 'ghost' \| 'link'`	`'solid'`	Estilo visual del botón: solid, outline, soft, ghost o link.
`color (hub-button)`	`'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'neutral' \| 'light' \| 'dark' \| string`	`'primary'`	Acento semántico del botón. Conjunto abierto: cualquiera de los nueve acentos integrados, un acento personalizado registrado mediante hub-btn-color-rules(), un color CSS con nombre o un literal (#hex, rgb(), oklch(), var(...)). Alimenta el slot --hub-btn-accent del que se deriva cada color de rol.
`size (hub-button)`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Token de tamaño del botón: sm, md, lg o xl.
`loading (hub-button)`	`boolean`	`false`	Muestra el spinner animado y marca el botón como ocupado Y deshabilitado: refleja aria-busy="true" y el atributo nativo disabled, lo saca del orden de tabulación y bloquea la activación por puntero/teclado para que un envío en curso no pueda dispararse dos veces.
`disabled (hub-button)`	`boolean`	`false`	Deshabilita el botón, reflejando el atributo nativo disabled en el elemento anfitrión.
`color (hub-fab)`	`HubSemanticColor`	`'primary'`	Acento semántico del fondo del FAB. Acepta los acentos integrados o cualquier color personalizado/literal a través del slot --hub-fab-accent.
`size (hub-fab)`	`'mini' \| 'standard' \| 'large'`	`'standard'`	Diámetro del FAB circular: mini, standard o large.
`extended (hub-fab)`	`boolean`	`false`	Renderiza el FAB como una píldora extendida que muestra el contenido proyectado de [slot=label] junto al icono.
`position (hub-fab)`	`'top-start' \| 'top-center' \| 'top-end' \| 'middle-start' \| 'center' \| 'middle-end' \| 'bottom-start' \| 'bottom-center' \| 'bottom-end'`	`'bottom-end'`	Posición fija en el viewport del FAB sobre una rejilla de nueve posiciones; implementada con propiedades lógicas CSS para soporte RTL.
`collapseOnScroll (hub-fab)`	`boolean`	`false`	Cuando es true, un FAB extendido se colapsa a solo icono una vez que la página se desplaza más de 50px.
`disabled (hub-fab)`	`boolean`	`false`	Deshabilita el FAB, aplicando la apariencia hub-fab-disabled.
`color (hub-speed-dial)`	`HubSemanticColor`	`'primary'`	Acento semántico pintado en el FAB disparador del speed dial. Acepta los acentos integrados o cualquier color personalizado/literal.
`size (hub-speed-dial)`	`'mini' \| 'standard' \| 'large'`	`'standard'`	Tamaño del FAB disparador: mini, standard o large.
`position (hub-speed-dial)`	`HubFabPosition`	`'bottom-end'`	Posición fija en el viewport del speed dial sobre la rejilla FAB de nueve posiciones.
`direction (hub-speed-dial)`	`'up' \| 'down' \| 'left' \| 'right'`	`'up'`	Dirección en la que los elementos de acción se expanden desde el disparador: up, down, left o right.
`trigger (hub-speed-dial)`	`'click' \| 'hover'`	`'click'`	Interacción que abre el speed dial: click lo alterna; hover lo abre con mouseenter y lo cierra con mouseleave.
`isOpen (hub-speed-dial)`	`boolean (two-way model)`	`false`	Estado de apertura del speed dial con enlace bidireccional (signal model). Pulsar Escape lo cierra automáticamente.
`icon (hub-speed-dial-item)`Obligatorio	`string`	—	Cadena de clases CSS para el icono de la acción, renderizado como <i [class]="icon()"> dentro del botón del elemento. También se usa como aria-label de respaldo cuando no se establece etiqueta.
`label (hub-speed-dial-item)`	`string`	`''`	Etiqueta de tooltip mostrada junto al botón de acción; también se usa como su aria-label accesible.
`color (hub-speed-dial-item)`	`HubSemanticColor \| 'default'`	`'default'`	Acento semántico del botón de acción; 'default' mantiene la apariencia neutra. Los colores personalizados/literales pintan a través del slot --hub-speed-dial-item-accent.
`disabled (hub-speed-dial-item)`	`boolean`	`false`	Deshabilita el botón del elemento de acción; itemClick no se emite mientras está deshabilitado.
`hubDropdown ([hubDropdown])`Obligatorio	`TemplateRef<any>`	—	El ng-template renderizado dentro del panel overlay a nivel de body, enlazado como [hubDropdown]="tpl".
`placement ([hubDropdown])`	`'top-start' \| 'top' \| 'top-end' \| 'start' \| 'end' \| 'bottom-start' \| 'bottom' \| 'bottom-end'`	`'bottom-start'`	Colocación preferida del panel respecto al botón que lo abre. El panel se abre ahí siempre que quepa; cuando no cabe, se da la vuelta por el borde que se iba a salir: de abajo a arriba, y del final lógico al principio, que se invierte en escritura de derecha a izquierda.
`trigger ([hubDropdown])`	`'click' \| 'hover'`	`'click'`	Interacción que abre el dropdown: click lo alterna; hover lo abre con mouseenter y lo cierra con mouseleave.
`closeOnSelect ([hubDropdown])`	`boolean`	`true`	Cuando es true, cualquier clic dentro del contenido del panel cierra el dropdown automáticamente.
`disabled ([hubDropdown])`	`boolean`	`false`	Impide que el dropdown se abra.
`offsetY ([hubDropdown])`	`number`	`4`	Separación en píxeles entre el disparador y el panel a lo largo del eje de colocación.
`panelClass ([hubDropdown])`	`string`	`''`	Clase CSS extra añadida al panel overlay junto a la clase por defecto hub-dropdown-overlay.
`isOpen ([hubDropdown])`	`boolean (two-way model)`	`false`	Estado de apertura del dropdown con enlace bidireccional (signal model). Se cierra automáticamente con Escape, clic fuera y scroll de la página.
`color (hub-dropdown-panel)`	`HubSemanticColor \| 'default'`	`'default'`	Acento semántico para el borde superior del panel; 'default' mantiene el borde neutro.
`color (hub-dropdown-item)`	`HubSemanticColor \| 'default'`	`'default'`	Acento semántico para el color de la etiqueta del elemento; 'default' hereda el color del panel.
`icon (hub-dropdown-item)`	`string \| undefined`	`undefined`	Cadena de clases CSS opcional para un icono renderizado como <i [class]="icon()"> antes de la etiqueta.
`disabled (hub-dropdown-item)`	`boolean`	`false`	Deshabilita el elemento del menú; los clics se ignoran e itemClick no se emite.
`selected (hub-dropdown-item)`	`boolean`	`false`	Muestra un indicador de marca de verificación que señala el elemento como seleccionado.
`config (hub-actions-cell)`Obligatorio	`HubActionsCellConfig`	`—`	Lo que ofrece una fila, en términos neutros: los botones y menús con sus iconos, etiquetas, tooltips y estado disabled, ya resueltos para esa fila. Lo escribe una biblioteca anfitriona a través de hubActionsAdapter, no a mano.

Outputs

Reacciona a lo que hace buttons: 9 eventos a los que enganchar tu lógica.

Nombre	Tipo	Descripción
`fabClick (hub-fab)`	`OutputEmitterRef<void>`	Emite cuando se activa el FAB, con el puntero o con Enter/Espacio. No emite nada mientras está deshabilitado.
`isOpenChange (hub-speed-dial)`	`OutputEmitterRef<boolean>`	Emite el nuevo estado de apertura cada vez que cambia el model isOpen (contraparte del enlace bidireccional).
`opened (hub-speed-dial)`	`OutputEmitterRef<void>`	Emite después de que el speed dial se abra.
`closed (hub-speed-dial)`	`OutputEmitterRef<void>`	Emite después de que el speed dial se cierre, incluidos los cierres con la tecla Escape.
`itemClick (hub-speed-dial-item)`	`OutputEmitterRef<void>`	Emite cuando se activa el botón del elemento de acción.
`isOpenChange ([hubDropdown])`	`OutputEmitterRef<boolean>`	Emite el nuevo estado de apertura cada vez que cambia el model isOpen (contraparte del enlace bidireccional).
`opened ([hubDropdown])`	`OutputEmitterRef<void>`	Emite después de que el panel overlay se adjunte y el dropdown se abra.
`closed ([hubDropdown])`	`OutputEmitterRef<void>`	Emite después de que el dropdown se cierre y el overlay se destruya (Escape, clic fuera, scroll o closeOnSelect).
`itemClick (hub-dropdown-item)`	`OutputEmitterRef<void>`	Emite cuando se activa el elemento del menú; se suprime mientras el elemento está deshabilitado.

Templates

Hazlo tuyo — 3 plantillas para proyectar tu propio marcado.

Nombre	Descripción	Ejemplo
`[slot=icon] (hub-fab)`	Contenido proyectado como icono del FAB. Se renderiza tanto en la forma circular como en la extendida.	`<hub-fab aria-label="New document"> <i slot="icon" class="fa-solid fa-plus"></i> </hub-fab>`
`[slot=label] (hub-fab)`	Etiqueta proyectada junto al icono. Solo se renderiza mientras el FAB está extendido y el scroll no lo ha colapsado.	`<hub-fab extended aria-label="New document"> <i slot="icon" class="fa-solid fa-plus"></i> <span slot="label">New document</span> </hub-fab>`
`[hubTrigger] (hub-speed-dial)`	Contenido proyectado en el botón trigger del speed dial. Los items de acción van en el slot por defecto, fuera de él.	`<hub-speed-dial> <i hubTrigger class="fa-solid fa-plus"></i> <hub-speed-dial-item icon="fa-solid fa-pen" label="Edit" /> </hub-speed-dial>`