FloatButton

FloatButton. Available since 5.0.0.

When To Use

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

Examples

Basic

The most basic usage.

Shape

Change the shape of the FloatButton with shape.

BackTop

BackTop makes it easy to go back to the top of the page.

Type

Change the type of the FloatButton with type.

Description

Setting description prop to show FloatButton with description.

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

FloatButton Group

When multiple buttons are used together, <FloatButton.Group /> is recommended. By setting shape of FloatButton.Group, you can change the shape of group. shape of FloatButton.Group will override shape of FloatButton inside.

Controlled mode

Set the component to controlled mode through open, which need to be used together with trigger.

badge

FloatButton with Badge.

API

Common props ref：Common props

This component is available since antd@5.0.0.

common API

Property	Description	Type	Default	Version
icon	Set the icon component of button	ReactNode	-
description	Text and other	ReactNode	-
tooltip	The text shown in the tooltip	ReactNode \| () => ReactNode
type	Setting button type	`default` \| `primary`	`default`
shape	Setting button shape	`circle` \| `square`	`circle`
onClick	Set the handler to handle `click` event	(event) => void	-
href	The target of hyperlink	string	-
target	Specifies where to display the linked URL	string	-
badge	Attach Badge to FloatButton. `status` and other props related are not supported.	BadgeProps	-	5.4.0

FloatButton.Group

Property	Description	Type	Default
shape	Setting button shape of children	`circle` \| `square`	`circle`
trigger	Which action can trigger menu open/close	`click` \| `hover`	-
open	Whether the menu is visible or not, use it with trigger	boolean	-
onOpenChange	Callback executed when active menu is changed, use it with trigger	(open: boolean) => void	-

FloatButton.BackTop

Property	Description	Type	Default
duration	Time to return to top（ms）	number	450
target	Specifies the scrollable area dom node	() => HTMLElement	() => window
visibilityHeight	The BackTop button will not show until the scroll height reaches this value	number	400
onClick	A callback function, which can be executed when you click the button	() => void	-

Design Token

Component Token

Global Token

API

Common props ref：Common props

This component is available since antd@5.0.0.

common API

Property	Description	Type	Default	Version
icon	Set the icon component of button	ReactNode	-
description	Text and other	ReactNode	-
tooltip	The text shown in the tooltip	ReactNode \| () => ReactNode
type	Setting button type	`default` \| `primary`	`default`
shape	Setting button shape	`circle` \| `square`	`circle`
onClick	Set the handler to handle `click` event	(event) => void	-
href	The target of hyperlink	string	-
target	Specifies where to display the linked URL	string	-
badge	Attach Badge to FloatButton. `status` and other props related are not supported.	BadgeProps	-	5.4.0

FloatButton.Group

Property	Description	Type	Default
shape	Setting button shape of children	`circle` \| `square`	`circle`
trigger	Which action can trigger menu open/close	`click` \| `hover`	-
open	Whether the menu is visible or not, use it with trigger	boolean	-
onOpenChange	Callback executed when active menu is changed, use it with trigger	(open: boolean) => void	-

FloatButton.BackTop

Property	Description	Type	Default
duration	Time to return to top（ms）	number	450
target	Specifies the scrollable area dom node	() => HTMLElement	() => window
visibilityHeight	The BackTop button will not show until the scroll height reaches this value	number	400
onClick	A callback function, which can be executed when you click the button	() => void	-

Namu Design

FloatButton

Namu Design

FloatButton

When To Use

Examples

API

common API

FloatButton.Group

FloatButton.BackTop

Design Token

Component Token

Global Token

When To Use

Examples

API

common API

FloatButton.Group

FloatButton.BackTop

Design Token

Component Token

Global Token

FloatButtonChangelog

FloatButtonChangelog

When To Use

Examples

API

common API

FloatButton.Group

FloatButton.BackTop

Design Token

Component Token

Global Token

When To Use

Examples

API

common API

FloatButton.Group

FloatButton.BackTop

Design Token

Component Token

Global Token

FloatButton

FloatButton