FloatButton. Available since 5.0.0
.
import React from 'react';
import { FloatButton } from 'antd';
const App: React.FC = () => <FloatButton onClick={() => console.log('click')} />;
export default App;
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;
import React from 'react';
import { FloatButton } from 'antd';
const App: React.FC = () => <FloatButton tooltip={<div>Documents</div>} />;
export default App;
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;
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;
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;
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 | - |