FloatButton. Available since 5.0.0.
The most basic usage.
Change the shape of the FloatButton with shape.
Setting tooltip prop to show FloatButton with tooltip.
Open menu mode with trigger, which could be hover or click.
BackTop makes it easy to go back to the top of the page.
Change the type of the FloatButton with type.
Setting description prop to show FloatButton with 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 shape of FloatButton.Group, you can change the shape of group. shape of FloatButton.Group will override shape of FloatButton inside.
Set the component to controlled mode through open, which need to be used together with trigger.
FloatButton with Badge.
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 | () => 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 |
| 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 | - |
| 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 | - |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| zIndexPopup | number |
