When multiple buttons are used together, nz-float-button-group is recommended. By setting nzShape of FloatButtonGroup, you can change the shape of group.

      Loading...

Controlled mode

Set the nzOpen property to control whether nz-float-button-group is expanded.

      Loading...

Scroll down to see the back to top button on the bottom right

Back Top

Set the nzOpen property to control whether nz-float-button-group is expanded.

      Loading...

API#

Common API#

Property	Description	Type	Default	Version
`[nzIcon]`	Set the icon component of button	`string \| TemplateRef<void> \| null`	-
`[nzDescription]`	Text and other content	`string \| TemplateRef<void> \| null`	-
`[nzType]`	Button type	`'default' \| 'primary'`	`'default'`
`[nzShape]`	Button shape	`'circle' \| 'square'`	`'circle'`
`[nzHref]`	The target of hyperlink	`string`	-
`[nzTarget]`	Specifies where to display the linked URL	`string`	-
`[nzBadge]`	badge	`NzFloatButtonBadge`	-	20.4.0
`(nzOnClick)`	Callback of `click` event	`EventEmitter<boolean>`	-

nz-float-button-groupcomponent#

Property	Description	Type	Default
`[nzTrigger]`	Which action can trigger menu open/close	`'click' \| 'hover'`	-
`[nzPlacement]`	Customize menu animation placement	`'top' \| 'right' \| 'bottom' \| 'left'`	`'top'`
`[nzOpen]`	Whether the menu is visible or not	`boolean`	-
`(nzOnOpenChange)`	Callback executed when active menu is changed	`EventEmitter<boolean>`	-

nz-float-button-topcomponent#

Property	Description	Type	Default	Global Config
`[nzVisibilityHeight]`	The `nz-float-button-top` button will not show until the scroll height reaches this value	`number`	`400`	✅
`[nzTarget]`	Specifies the scrollable area dom node	`string \| Element`	`window`	-
`[nzDuration]`	Duration of scrolling to top (ms)	`number`	`450`	-

Interfaces#

NzFloatButtonBadge#

// omit nzShowDot, nzTitle, nzStatus, nzText from the props of NzBadge
export interface NzFloatButtonBadge {
  nzDot?: boolean;
  nzCount?: number | TemplateRef<void>;
  nzShowZero?: boolean;
  nzOverflowCount?: number;
  nzColor?: string;
  nzOffset?: [number, number];
  nzSize?: 'default' | 'small';
}