ant-design/components/float-button/index.en-US.md
MadCcc 4ecc0d7f95
docs: optimize overview svg (#47203)
* docs: optimize overview svg

* docs: update

* docs: dark
2024-01-29 14:50:36 +08:00

3.1 KiB
Raw Blame History

category group title cover coverDark demo tag
Components General FloatButton 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
New

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 Type Shape Description FloatButton with tooltip FloatButton Group Menu mode Controlled mode BackTop badge debug dot _InternalPanelDoNotUseOrYouWillBeFired

API

Common props refCommon 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 Version
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 Version
duration Time to return to topms 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