ant-design/components/float-button/index.en-US.md

category, group, title, description, cover, coverDark, demo

category	group	title	description	cover	coverDark	demo
Components	General	FloatButton	A button that floats at the top of the page.	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tXAoQqyr-ioAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*hSAwR7cnabwAAAAAAAAAAAAADrJ8AQ/original	cols 2

When To Use

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

Examples

Basic Type Shape Content FloatButton with tooltip FloatButton Group Menu mode Controlled mode placement BackTop badge debug dot Custom semantic dom styling _InternalPanelDoNotUseOrYouWillBeFired

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	-
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string>	-
content	Text and other	ReactNode	-
description	Please use content instead	ReactNode	-
tooltip	The text shown in the tooltip	ReactNode | TooltipProps	-	TooltipProps: 5.25.0
type	Setting button type	default | primary	default
shape	Setting button shape	circle | square	circle
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties>	-
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	-
htmlType	Set the original html type of button, see: MDN	submit | reset | button	button	5.21.0
badge	Attach Badge to FloatButton. status and other props related are not supported.	BadgeProps	-	5.4.0

FloatButton.Group

Property	Description	Type	Default	Version
open	Whether the menu is visible or not, use it with trigger	boolean	-
closeIcon	Customize close button icon	React.ReactNode	<CloseOutlined />
placement	Customize menu animation placement	top | left | right | bottom	top	5.21.0
shape	Setting button shape of children	circle | square	circle
trigger	Which action can trigger menu open/close	click | hover	-
onOpenChange	Callback executed when active menu is changed, use it with trigger	(open: boolean) => void	-
onClick	Set the handler to handle click event (only work in Menu mode)	(event) => void	-	5.3.0

FloatButton.BackTop

Property	Description	Type	Default	Version
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	-

Semantic DOM

FloatButton

FloatButton.Group

Design Token