logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.0
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

FloatButton

A button that floats at the top of the page.
Importimport { FloatButton } from "antd";
Sourcecomponents/float-button
Docs
Edit this pageChangelog
Versionsupported since 5.0.0

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

When To Use

  • For global functionality on the site.
  • Buttons that can be seen wherever you browse.

Examples

API

Common props ref:Common props

This component is available since antd@5.0.0.

common API

PropertyDescriptionTypeDefaultVersion
iconSet the icon component of buttonReactNode-
descriptionText and otherReactNode-
tooltipThe text shown in the tooltipReactNode | TooltipProps-TooltipProps: 5.25.0
typeSetting button typedefault | primarydefault
shapeSetting button shapecircle | squarecircle
onClickSet the handler to handle click event(event) => void-
hrefThe target of hyperlinkstring-
targetSpecifies where to display the linked URLstring-
htmlTypeSet the original html type of button, see: MDNsubmit | reset | buttonbutton5.21.0
badgeAttach Badge to FloatButton. status and other props related are not supported.BadgeProps-5.4.0

FloatButton.Group

PropertyDescriptionTypeDefaultVersion
shapeSetting button shape of childrencircle | squarecircle
triggerWhich action can trigger menu open/closeclick | hover-
openWhether the menu is visible or not, use it with triggerboolean-
closeIconCustomize close button iconReact.ReactNode<CloseOutlined />
placementCustomize menu animation placementtop | left | right | bottomtop5.21.0
onOpenChangeCallback executed when active menu is changed, use it with trigger(open: boolean) => void-
onClickSet the handler to handle click event (only work in Menu mode)(event) => void-5.3.0

FloatButton.BackTop

PropertyDescriptionTypeDefaultVersion
durationTime to return to top(ms)number450
targetSpecifies the scrollable area dom node() => HTMLElement() => window
visibilityHeightThe BackTop button will not show until the scroll height reaches this valuenumber400
onClickA callback function, which can be executed when you click the button() => void-

Design Token

Global TokenHow to use?
Basic

The most basic usage.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Shape

Change the shape of the FloatButton with the shape property.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
FloatButton with tooltip

Setting the tooltip property shows the FloatButton with a tooltip.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Menu mode

Open menu mode with trigger, which could be hover or click.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
placement

Customize animation placement, providing four preset placement: top, right, bottom, left, the top position by default.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.21.0
badge

FloatButton with Badge.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Type

Change the type of the FloatButton with the type property.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Description

Setting the description property allows you to show a FloatButton with a description.

supported only when shape is square. Due to narrow space for text, short sentence is recommended.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
FloatButton Group

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.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Controlled mode

Set the component to controlled mode through open, which need to be used together with trigger.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
BackTop

BackTop makes it easy to go back to the top of the page.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code