FloatButton. Available since 5.0.0.
The most basic usage.
import React from 'react';
import { FloatButton } from 'antd';
const App: React.FC = () => <FloatButton onClick={() => console.log('click')} />;
export default App;
Change the shape of the FloatButton with shape.
import React from 'react';
import { FloatButton } from 'antd';
import { CustomerServiceOutlined } from '@ant-design/icons';
const App: React.FC = () => (
<>
<FloatButton
shape="circle"
type="primary"
style={{ right: 94 }}
icon={<CustomerServiceOutlined />}
/>
<FloatButton
shape="square"
type="primary"
style={{ right: 24 }}
icon={<CustomerServiceOutlined />}
/>
</>
);
export default App;
Setting tooltip prop to show FloatButton with tooltip.
import React from 'react';
import { FloatButton } from 'antd';
const App: React.FC = () => <FloatButton tooltip={<div>Documents</div>} />;
export default App;
Open menu mode with trigger, which could be hover or click.
import React from 'react';
import { FloatButton } from 'antd';
import { CustomerServiceOutlined, CommentOutlined } from '@ant-design/icons';
const App: React.FC = () => (
<>
<FloatButton.Group
trigger="click"
type="primary"
style={{ right: 24 }}
icon={<CustomerServiceOutlined />}
>
<FloatButton />
<FloatButton icon={<CommentOutlined />} />
</FloatButton.Group>
<FloatButton.Group
trigger="hover"
type="primary"
style={{ right: 94 }}
icon={<CustomerServiceOutlined />}
>
<FloatButton />
<FloatButton icon={<CommentOutlined />} />
</FloatButton.Group>
</>
);
export default App;
Change the type of the FloatButton with type.
import React from 'react';
import { FloatButton } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
const App: React.FC = () => (
<>
<FloatButton icon={<QuestionCircleOutlined />} type="primary" style={{ right: 24 }} />
<FloatButton icon={<QuestionCircleOutlined />} type="default" style={{ right: 94 }} />
</>
);
export default App;
Setting description prop to show FloatButton with description.
supported only when
shapeissquare. Due to narrow space for text, short sentence is recommended.
import React from 'react';
import { FloatButton } from 'antd';
import { FileTextOutlined } from '@ant-design/icons';
const App: React.FC = () => (
<>
<FloatButton
icon={<FileTextOutlined />}
description="HELP INFO"
shape="square"
style={{ right: 24 }}
/>
<FloatButton description="HELP INFO" shape="square" style={{ right: 94 }} />
<FloatButton
icon={<FileTextOutlined />}
description="HELP"
shape="square"
style={{ right: 164 }}
/>
</>
);
export default App;
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.
import React from 'react';
import { FloatButton } from 'antd';
import { QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons';
const App: React.FC = () => (
<>
<FloatButton.Group shape="circle" style={{ right: 24 }}>
<FloatButton icon={<QuestionCircleOutlined />} />
<FloatButton />
<FloatButton.BackTop visibilityHeight={0} />
</FloatButton.Group>
<FloatButton.Group shape="square" style={{ right: 94 }}>
<FloatButton icon={<QuestionCircleOutlined />} />
<FloatButton />
<FloatButton icon={<SyncOutlined />} />
<FloatButton.BackTop visibilityHeight={0} />
</FloatButton.Group>
</>
);
export default App;
BackTop makes it easy to go back to the top of the page.
import React from 'react';
import { FloatButton } from 'antd';
const App: React.FC = () => (
<div style={{ height: '500vh', padding: 10 }}>
<div>Scroll to bottom</div>
<div>Scroll to bottom</div>
<div>Scroll to bottom</div>
<div>Scroll to bottom</div>
<div>Scroll to bottom</div>
<div>Scroll to bottom</div>
<div>Scroll to bottom</div>
<FloatButton.BackTop />
</div>
);
export default App;
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 | - |
| 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 | boolean | - | |
| onOpenChange | Callback executed when active menu is changed | (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 | - |