API-Referenz

Hier ist der vollständige Vertrag für buttons: alles, was du binden, abhören, projizieren und gestalten kannst, an einem Ort gesammelt. Verdrahte, was du brauchst, und gestalte, was du willst — es ist standalone und Signals-freundlich.

Inputs

Stelle buttons mit 34 Inputs ein. Binde sie wie jeden Angular-@Input.

Name	Typ	Standard	Beschreibung
`variant (hub-button)`	`'solid' \| 'outline' \| 'soft' \| 'ghost' \| 'link'`	`'solid'`	Visueller Stil der Schaltfläche: solid, outline, soft, ghost oder link.
`color (hub-button)`	`'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'neutral' \| 'light' \| 'dark' \| string`	`'primary'`	Semantischer Akzent der Schaltfläche. Offene Menge: einer der neun eingebauten Akzente, ein über hub-btn-color-rules() registrierter benutzerdefinierter Akzent, eine benannte CSS-Farbe oder ein Literal (#hex, rgb(), oklch(), var(...)). Speist den --hub-btn-accent-Slot, aus dem jede Rollenfarbe abgeleitet wird.
`size (hub-button)`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Größen-Token der Schaltfläche: sm, md, lg oder xl.
`loading (hub-button)`	`boolean`	`false`	Zeigt den animierten Spinner und markiert die Schaltfläche als beschäftigt UND deaktiviert: spiegelt aria-busy="true" und das native disabled-Attribut wider, entfernt sie aus der Tab-Reihenfolge und blockiert Zeiger-/Tastaturaktivierung, damit ein laufender Submit nicht zweimal ausgelöst werden kann.
`disabled (hub-button)`	`boolean`	`false`	Deaktiviert die Schaltfläche und spiegelt das native disabled-Attribut auf dem Host-Element wider.
`color (hub-fab)`	`HubSemanticColor`	`'primary'`	Semantischer Akzent des FAB-Hintergrunds. Akzeptiert die eingebauten Akzente oder jede benutzerdefinierte/literale Farbe über den --hub-fab-accent-Slot.
`size (hub-fab)`	`'mini' \| 'standard' \| 'large'`	`'standard'`	Durchmesser des kreisförmigen FAB: mini, standard oder large.
`extended (hub-fab)`	`boolean`	`false`	Rendert den FAB als erweiterte Pille, die den projizierten [slot=label]-Inhalt neben dem Icon anzeigt.
`position (hub-fab)`	`'top-start' \| 'top-center' \| 'top-end' \| 'middle-start' \| 'center' \| 'middle-end' \| 'bottom-start' \| 'bottom-center' \| 'bottom-end'`	`'bottom-end'`	Feste Viewport-Position des FAB auf einem Raster mit neun Plätzen; umgesetzt mit logischen CSS-Eigenschaften für RTL-Unterstützung.
`collapseOnScroll (hub-fab)`	`boolean`	`false`	Wenn true, klappt ein erweiterter FAB auf Nur-Icon zusammen, sobald die Seite über 50px hinaus scrollt.
`disabled (hub-fab)`	`boolean`	`false`	Deaktiviert den FAB und wendet das hub-fab-disabled-Erscheinungsbild an.
`color (hub-speed-dial)`	`HubSemanticColor`	`'primary'`	Semantischer Akzent des Trigger-FAB des Speed Dial. Akzeptiert die eingebauten Akzente oder jede benutzerdefinierte/literale Farbe.
`size (hub-speed-dial)`	`'mini' \| 'standard' \| 'large'`	`'standard'`	Größe des Trigger-FAB: mini, standard oder large.
`position (hub-speed-dial)`	`HubFabPosition`	`'bottom-end'`	Feste Viewport-Position des Speed Dial auf dem FAB-Raster mit neun Plätzen.
`direction (hub-speed-dial)`	`'up' \| 'down' \| 'left' \| 'right'`	`'up'`	Richtung, in der sich die Aktionselemente vom Trigger aus entfalten: up, down, left oder right.
`trigger (hub-speed-dial)`	`'click' \| 'hover'`	`'click'`	Interaktion, die das Speed Dial öffnet: click schaltet es um; hover öffnet bei mouseenter und schließt bei mouseleave.
`isOpen (hub-speed-dial)`	`boolean (two-way model)`	`false`	Two-Way-bindbarer Offen-Zustand des Speed Dial (Model-Signal). Drücken von Escape schließt es automatisch.
`icon (hub-speed-dial-item)`Erforderlich	`string`	—	CSS-Klassen-String für das Aktions-Icon, gerendert als <i [class]="icon()"> innerhalb der Element-Schaltfläche. Dient zudem als aria-label-Fallback, wenn keine Beschriftung gesetzt ist.
`label (hub-speed-dial-item)`	`string`	`''`	Tooltip-Beschriftung, die neben der Aktions-Schaltfläche angezeigt wird; dient zugleich als zugängliches aria-label.
`color (hub-speed-dial-item)`	`HubSemanticColor \| 'default'`	`'default'`	Semantischer Akzent der Aktions-Schaltfläche; 'default' behält das neutrale Erscheinungsbild. Benutzerdefinierte/literale Farben wirken über den --hub-speed-dial-item-accent-Slot.
`disabled (hub-speed-dial-item)`	`boolean`	`false`	Deaktiviert die Aktionselement-Schaltfläche; itemClick wird im deaktivierten Zustand nicht ausgelöst.
`hubDropdown ([hubDropdown])`Erforderlich	`TemplateRef<any>`	—	Das ng-template, das innerhalb des Overlay-Panels auf body-Ebene gerendert wird, gebunden als [hubDropdown]="tpl".
`placement ([hubDropdown])`	`'top-start' \| 'top' \| 'top-end' \| 'start' \| 'end' \| 'bottom-start' \| 'bottom' \| 'bottom-end'`	`'bottom-start'`	Platzierung des Panels relativ zum Trigger-Element; das Overlay probiert die zugeordnete Position und weicht auf Alternativen aus, bis eine in den Viewport passt.
`trigger ([hubDropdown])`	`'click' \| 'hover'`	`'click'`	Interaktion, die das Dropdown öffnet: click schaltet es um; hover öffnet bei mouseenter und schließt bei mouseleave.
`closeOnSelect ([hubDropdown])`	`boolean`	`true`	Wenn true, schließt jeder Klick innerhalb des Panel-Inhalts das Dropdown automatisch.
`disabled ([hubDropdown])`	`boolean`	`false`	Verhindert das Öffnen des Dropdowns.
`offsetY ([hubDropdown])`	`number`	`4`	Versatz in Pixeln zwischen Trigger und Panel entlang der Platzierungsachse.
`panelClass ([hubDropdown])`	`string`	`''`	Zusätzliche CSS-Klasse, die dem Overlay-Panel neben der Standardklasse hub-dropdown-overlay hinzugefügt wird.
`isOpen ([hubDropdown])`	`boolean (two-way model)`	`false`	Two-Way-bindbarer Offen-Zustand des Dropdowns (Model-Signal). Schließt automatisch bei Escape, Klick außerhalb, Backdrop-Klick und Seiten-Scroll.
`color (hub-dropdown-panel)`	`HubSemanticColor \| 'default'`	`'default'`	Semantischer Akzent für den oberen Panel-Rand; 'default' behält den neutralen Rand.
`color (hub-dropdown-item)`	`HubSemanticColor \| 'default'`	`'default'`	Semantischer Akzent für die Beschriftungsfarbe des Elements; 'default' erbt die Panel-Farbe.
`icon (hub-dropdown-item)`	`string \| undefined`	`undefined`	Optionaler CSS-Klassen-String für ein Icon, das als <i [class]="icon()"> vor der Beschriftung gerendert wird.
`disabled (hub-dropdown-item)`	`boolean`	`false`	Deaktiviert den Menüeintrag; Klicks werden ignoriert und itemClick wird nicht ausgelöst.
`selected (hub-dropdown-item)`	`boolean`	`false`	Zeigt einen Häkchen-Indikator, der das Element als ausgewählt markiert.

Outputs

Reagiere darauf, was buttons tut — 9 Events, an die du deine Logik anknüpfen kannst.

Name	Typ	Beschreibung
`fabClick (hub-fab)`	`OutputEmitterRef<void>`	Deklarierter Output für die FAB-Aktivierung. Die aktuelle Implementierung löst ihn intern nie aus — stattdessen das native (click)-Ereignis auf <hub-fab> binden.
`isOpenChange (hub-speed-dial)`	`OutputEmitterRef<boolean>`	Gibt den neuen Offen-Zustand aus, wann immer sich das isOpen-Model ändert (Gegenstück für das Two-Way-Binding).
`opened (hub-speed-dial)`	`OutputEmitterRef<void>`	Wird ausgelöst, nachdem sich das Speed Dial geöffnet hat.
`closed (hub-speed-dial)`	`OutputEmitterRef<void>`	Wird ausgelöst, nachdem sich das Speed Dial geschlossen hat, auch bei Schließen per Escape-Taste.
`itemClick (hub-speed-dial-item)`	`OutputEmitterRef<void>`	Wird ausgelöst, wenn die Aktionselement-Schaltfläche betätigt wird.
`isOpenChange ([hubDropdown])`	`OutputEmitterRef<boolean>`	Gibt den neuen Offen-Zustand aus, wann immer sich das isOpen-Model ändert (Gegenstück für das Two-Way-Binding).
`opened ([hubDropdown])`	`OutputEmitterRef<void>`	Wird ausgelöst, nachdem das Overlay-Panel angehängt wurde und sich das Dropdown geöffnet hat.
`closed ([hubDropdown])`	`OutputEmitterRef<void>`	Wird ausgelöst, nachdem sich das Dropdown geschlossen hat und das Overlay freigegeben wurde (Escape, Klick außerhalb, Scroll, Backdrop oder closeOnSelect).
`itemClick (hub-dropdown-item)`	`OutputEmitterRef<void>`	Wird ausgelöst, wenn der Menüeintrag betätigt wird; unterdrückt, solange das Element deaktiviert ist.

Templates

Noch keine Templates dokumentiert.