FloatButton
FloatButton
Importimport { FloatButton } from 'antd'; |
Common props ref：Common props
This component is available since
antd@5.0.0.
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| icon | Set the icon component of button | ReactNode | - | FloatButton: ×, BackTop: 5.27.0 | |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | 6.0.0 | |
| 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 | × | |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | 6.0.0 | |
| 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 | × |
| disabled | Whether the button is disabled | boolean | - | 6.4.0 | × |
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| open | Whether the menu is visible or not, use it with trigger | boolean | - | × | |
| closeIcon | Customize close button icon | React.ReactNode | <CloseOutlined /> | 5.16.0 | |
| placement | Customize menu animation placement | top | left | right | bottom | top | 5.21.0 | × |
| shape | Setting button shape of children | circle | square | circle | × | |
| 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 | - |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| borderRadius | Border radius of base components | number | 6 |
| borderRadiusLG | LG size border radius, used in some large border radius components, such as Card, Modal and other components. | number | 8 |
| boxShadowSecondary | Control the secondary box shadow style of an element. | string | 0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05) |
| controlHeight | The height of the basic controls such as buttons and input boxes in Ant Design | number | 32 |
| controlHeightLG | LG component height | number | 40 |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| fontSizeIcon | Control the font size of operation icon in Select, Cascader, etc. Normally same as fontSizeSM. | number | 12 |
| fontSizeSM | Small font size | number | 12 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| marginLG | Control the margin of an element, with a large size. | number | 24 |
| marginXXL | Control the margin of an element, with the largest size. | number | 48 |
| motionDurationMid | Motion speed, medium speed. Used for medium element animation interaction. | string | 0.2s |
| motionDurationSlow | Motion speed, slow speed. Used for large element animation interaction. | string | 0.3s |
| padding | Control the padding of the element. | number | 16 |
| paddingXXS | Control the extra extra small padding of the element. | number | 4 |
| zIndexPopupBase | Base zIndex of component like FloatButton, Affix which can be cover by large popup | number | 1000 |