@kit-ng-ui/float-button

Floating action button family for Kit UI. Mirrors ant-design's FloatButton, FloatButton.Group, and FloatButton.BackTop.

Install

pnpm add @kit-ng-ui/float-button @kit-ng-ui/core @kit-ng-ui/icons

Styles

Import the package's stylesheet once at the app level (alongside @kit-ng-ui/core/styles):

// app styles.scss
@use '@kit-ng-ui/core/styles' as *;
@use '@kit-ng-ui/float-button/styles' as float-button;

Namespaces must be distinct from other @kit-ng-ui/<pkg>/styles imports (Sass collapses the default namespace from the last path segment).

The components themselves carry no styleUrls — the styles are global, BEM-flat, and live in a single stylesheet so the bundle never duplicates rules.

Use

import { Component } from '@angular/core';
import {
  KitFloatButtonComponent,
  KitFloatButtonGroupComponent,
  KitBackTopComponent,
} from '@kit-ng-ui/float-button';

@Component({
  standalone: true,
  imports: [KitFloatButtonComponent, KitFloatButtonGroupComponent, KitBackTopComponent],
  template: `
    <!-- Single FAB -->
    <kit-float-button icon="plus" type="primary" floating bottom="32px" right="32px" ariaLabel="Add" />

    <!-- Speed-dial group -->
    <kit-float-button-group floating bottom="120px" right="32px" trigger="click" icon="plus">
      <kit-float-button icon="search" ariaLabel="Search" />
      <kit-float-button icon="github" ariaLabel="GitHub" />
    </kit-float-button-group>

    <!-- Back to top -->
    <kit-back-top [visibilityHeight]="600" />
  `,
})
export class Demo {}

API

<kit-float-button>

| Input | Type | Default | Description | | ------------- | -------------------------- | ----------- | ---------------------------------------------------------- | | type | 'default' \| 'primary' | 'default' | Visual variant | | shape | 'circle' \| 'square' | 'circle' | Corner radius | | icon | string \| null | null | Icon name from the registry | | description | string \| null | null | Small caption rendered under the icon | | disabled | boolean | false | Disabled state | | floating | boolean | false | Pin via position: fixed | | top | string \| null | null | CSS length (only used when floating) | | right | string \| null | null | CSS length (only used when floating) | | bottom | string \| null | null | CSS length (only used when floating) | | left | string \| null | null | CSS length (only used when floating) | | href | string \| null | null | When set, renders as an <a> instead of a <button> | | target | string \| null | null | Anchor target attribute | | rel | string \| null | null | Anchor rel attribute | | ariaLabel | string \| null | null | Required for icon-only buttons (a11y) |

| Output | Payload | Description | | --------- | ------------ | -------------------------------------------- | | clicked | MouseEvent | Fires on click. Suppressed when disabled. |

<kit-float-button-group>

Stacks child <kit-float-button> elements vertically. With [trigger], renders a primary trigger button that toggles the expanded state.

| Input | Type | Default | Description | | ----------- | ------------------------------- | ----------- | -------------------------------------------------------- | | trigger | 'click' \| 'hover' \| null | null | Toggle mode. null keeps the stack always visible. | | type | 'default' \| 'primary' | 'default' | Trigger button type | | shape | 'circle' \| 'square' | 'circle' | Trigger button shape | | icon | string | 'plus' | Icon shown on the trigger when collapsed | | closeIcon | string | 'close' | Icon shown on the trigger when expanded | | ariaLabel | string \| null | null | a11y label for the trigger | | floating | boolean | false | Pin via position: fixed | | top/right/bottom/left | string \| null | null | CSS length (only used when floating) |

<kit-back-top>

Hidden until the page scroll position passes visibilityHeight. Smooth-scrolls to the top on click.

| Input | Type | Default | Description | | ------------------ | -------------------------- | ------------- | ------------------------------------------------- | | visibilityHeight | number | 400 | Scroll threshold in px before the button appears | | smooth | boolean | true | Use behavior: 'smooth' when scrolling | | target | HTMLElement \| null | null | Scroll container to observe and scroll. Defaults to window. | | icon | string | 'chevron-up'| Icon name | | type | 'default' \| 'primary' | 'default' | Visual variant | | shape | 'circle' \| 'square' | 'circle' | Corner radius | | ariaLabel | string \| null | 'Back to top' | a11y label | | top/right/bottom/left | string \| null | null | Placement. right: 32px; bottom: 32px is applied only when none of the four are set; otherwise the component renders with the exact values you provide. |

| Output | Payload | Description | | --------- | ------- | ------------------------------------------------- | | clicked | void | Fires synchronously after scrollTo is dispatched (not when the scroll animation finishes) |

Behavior notes

• floating toggles position: fixed; z-index: var(--kit-z-fixed). Without it, the component sits inline so it can be embedded in any layout.
• The group's expanded state uses opacity + transform transitions — items remain in the DOM, just pointer-events: none when collapsed.
• <kit-back-top> is SSR-safe: the scroll listener is only attached in the browser. Pre-rendered HTML always shows the hidden state.
• Both single buttons and the group's trigger participate in focus-visible styling with the standard kit focus ring.