ant-design/components/float-button/index.zh-CN.md

category	group	subtitle	title	cover	coverDark	demo	tag
Components	通用	悬浮按钮	FloatButton	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HS-wTIIwu0kAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a0hwTY_rOSUAAAAAAAAAAAAADrJ8AQ/original	cols 2	New

悬浮按钮。自 5.0.0 版本开始提供该组件。

何时使用

• 用于网站上的全局功能；
• 无论浏览到何处都可以看见的按钮。

代码演示

基本 类型 形状 描述 含有气泡卡片的悬浮按钮 浮动按钮组 菜单模式 受控模式 回到顶部 徽标数 调试小圆点使用 _InternalPanelDoNotUseOrYouWillBeFired

API

通用属性参考：通用属性

自 antd@5.0.0 版本开始提供该组件。

共同的 API

参数	说明	类型	默认值	版本
icon	自定义图标	ReactNode	-
description	文字及其它内容	ReactNode	-
tooltip	气泡卡片的内容	ReactNode | () => ReactNode	-
type	设置按钮类型	default | primary	default
shape	设置按钮形状	circle | square	circle
onClick	点击按钮时的回调	(event) => void	-
href	点击跳转的地址，指定此属性 button 的行为和 a 链接一致	string	-
target	相当于 a 标签的 target 属性，href 存在时生效	string	-
badge	带徽标数字的悬浮按钮（不支持 status 以及相关属性）	BadgeProps	-	5.4.0

FloatButton.Group

参数	说明	类型	默认值	版本
shape	设置包含的 FloatButton 按钮形状	circle | square	circle
trigger	触发方式（有触发方式为菜单模式）	click | hover	-
open	受控展开，需配合 trigger 一起使用	boolean	-
onOpenChange	展开收起时的回调，需配合 trigger 一起使用	(open: boolean) => void	-

FloatButton.BackTop

参数	说明	类型	默认值	版本
duration	回到顶部所需时间（ms）	number	450
target	设置需要监听其滚动事件的元素	() => HTMLElement	() => window
visibilityHeight	滚动高度达到此参数值才出现 BackTop	number	400
onClick	点击按钮的回调函数	() => void	-

Design Token