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 | - | |
| description | Text and other | 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 |
|---|---|---|---|---|
| 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 | - | |
| closeIcon | Customize close button icon | React.ReactNode | <CloseOutlined /> | |
| placement | Customize menu animation placement | top | left | right | bottom | top | 5.21.0 |
| 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 | - |
The most basic usage.
Change the shape of the FloatButton with the shape property.
Setting the tooltip property shows the FloatButton with a tooltip.
Open menu mode with trigger, which could be hover or click.
Customize animation placement, providing four preset placement: top, right, bottom, left, the top position by default.
FloatButton with Badge.
Change the type of the FloatButton with the type property.
Setting the description property allows you to show a FloatButton with a description.
supported only when
shapeissquare. Due to narrow space for text, short sentence is recommended.
When multiple buttons are used together, <FloatButton.Group /> is recommended. By setting the shape property of FloatButton.Group, you can change the shape of group. The shape of the FloatButton.Group will override the shape of FloatButtons inside.
Set the component to controlled mode through open, which need to be used together with trigger.
BackTop makes it easy to go back to the top of the page.
