FloatButton

When To Use#

For global functionality on the site.
Buttons that can be seen wherever you browse.

Import Module#

import { NzFloatButtonModule } from 'ng-zorro-antd/float-button';

Examples

Basic

The most basic usage.

      Loading...

Shape

Change the shape of the FloatButton with nsShape.

      Loading...

FloatButton Group

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...

Type

Change the type of the FloatButton with nzType.

      Loading...

Description

Setting nzDescription prop to show FloatButton with description.

supported only when shape is square. Due to narrow space for text, short sentence is recommended.

      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
`[nzIcon]`	Set the icon component of button	`TemplateRef<void>`	-
`[nzDescription]`	Text and other	`TemplateRef<void> \| string`	-
`[nzType]`	Setting button type	`default \| primary`	`default`
`[nzShape]`	Setting button shape	`circle \| square`	`circle`
`[nzHref]`	The target of hyperlink	`string`	-
`[nzTarget]`	Specifies where to display the linked URL	`string`	-
`(nzOnClick)`	Set the handler to handle `click` event	`EventEmitter<boolean>`	-

nz-float-button-groupcomponent#

Property	Description	Type	Default
`[nzShape]`	Set button group shape	`circle \| square`	`circle`
`[nzTrigger]`	Which action can trigger menu open/close	`click \| hover`	-
`[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]`	Time to return to top (ms)	`number`	`450`
`(nzOnClick)`	a callback function, which can be executed when you click the button	`EventEmitter<boolean>`	-