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

category	type	title	cover	coverDark	tag
Components	Other	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	New

FloatButton. Available since 4.0.0.

When To Use

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

API

This component is available since ant-design-vue@4.0.0.

common API

Property	Description	Type	Default	Version
icon	Set the icon component of button	slot	-
description	Text and other	string | slot	-
tooltip	The text shown in the tooltip	string | slot
type	Setting button type	default | primary	default
shape	Setting button shape	circle | square	circle
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	-

common events

Events Name	Description	Arguments	Version
click	Set the handler to handle click event	(event) => void	-

FloatButton.Group

Property	Description	Type	Default	Version
shape	Setting button shape of children	circle | square	circle
trigger	Which action can trigger menu open/close	click | hover	-
open(v-model)	Whether the menu is visible or not	boolean	-

FloatButton.Group Events

Events Name	Description	Arguments	Version
openChange	Callback executed when active menu is changed	(open: boolean) => void	-

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