Importimport { FloatButton } from "antd"; |
Sourcecomponents/float-button |
Versionsupported since 5.0.0 |
Importimport { FloatButton } from "antd"; |
Sourcecomponents/float-button |
Versionsupported since 5.0.0 |
Common props ref：Common props
This component is available since
antd@5.0.0.
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| icon | Set the icon component of button | ReactNode | - | |
| classNames | Semantic DOM class | Record<SemanticDOM, string> | - | |
| content | Text and other | ReactNode | - | |
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 | |
| 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 |
| 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 | |
| styles | Semantic DOM style | Record<SemanticDOM, CSSProperties> | - | |
| 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 |
| 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 | - |