When an action should float over the page, how to group and place it, and what BackTop needs.
When to use
FloatButton floats over the page. It is position: fixed in the bottom-right corner of the window, outside your layout, and stays there while the page scrolls. That makes it the one control always in the reader's way, so use it only for an action that:
belongs to the whole page, not one region: compose, create, help, back to top;
would otherwise scroll out of reach on a long page;
is the only one, or one with a short menu. Two float buttons on one screen is one too many.
Use something else when
The action belongs to a region. Put a Button next to what it acts on.
Several actions matter equally. Use a toolbar or a page header with buttons. A group hides its buttons behind one.
The action is already visible. A floating copy of a button on screen only covers content.
The page is short. Nothing scrolls away, so the button covers content for nothing.
One button, or a group
One FloatButton is usually enough. Use FloatButton.Group only when the corner needs more than one action, and keep it to three or four.
Without trigger, a group shows all its buttons at once. A circle group spaces them apart. A square group joins them into one block with shared borders.
A group's shape wins. Set shape on the group, and every button inside takes it.
Opening a group: click or hover
trigger turns a group into a menu. Without it, FloatButton.Group shows all its buttons at once. With click or hover it opens from one button and shows a close icon, and open and placement start to apply.
Prefer trigger="click". It stays open while the pointer moves, closes on a click outside, and works with keyboard and touch.
trigger="hover" opens while the pointer is over the group and has no keyboard or touch equivalent. See the Accessibility tab.
placement (top, bottom, left, right) sets which way the menu opens. Point it away from the nearest edge. Other values fall back to top.
open and onOpenChange control the menu, so you can close it after an action. open only works together with trigger, and antd warns without it.
Type and shape
type sets the weight and shape the outline. A FloatButton has one size.
type="primary" for the one action the screen is for, type="default" for the rest. At most one primary per group.
shape="circle" is the default, for an icon. shape="square" is the only shape with room for text.
Keep one shape per screen.
The glyph, and when words are worth it
icon is the glyph and content the text label.
Only a button without text gets the default icon. A FloatButton with no icon and no content shows your pack's file icon. One with content shows only its text.
Use content, not description.description still works, but it is deprecated and warns on every render. Text needs shape="square", since a circle has no room for it. Keep it to a word or two, for a glyph that would be unclear alone, and put anything longer in tooltip.
Badge and tooltip
badge takes no text. It accepts what Badge does except status, text, title and children. Use dot for “something changed” and count for how many.
Take the count from the same data the panel behind the button shows, so the two cannot disagree.
Cap it with overflowCount. A four-digit count does not fit the button.
One badge per corner, not one on the group and another inside it.
tooltip takes a node, or TooltipProps when you need placement or color. Give every icon-only button one. It is not an accessible name and does not show on touch, so the button still needs an aria-label.
BackTop
BackTop appears once the page has scrolled past visibilityHeight (400 by default) and scrolls back to the top when clicked. It suits almost any long page.
Point BackTop at your scroll container.target defaults to the window. If your page scrolls inside an element, pass target={() => element}, or BackTop never appears.
showProgress rings the button with the scroll position. It helps on a long article and adds noise to an app screen.
duration is the scroll time in milliseconds, 450 by default, and drops to 0 for readers who prefer reduced motion.
Inside a FloatButton.Group, BackTop takes the group's shape.
Placement, and what is underneath
FloatButton sits in the bottom-right corner of the window. Move it by setting the inset yourself.
Position it with logical insets.insetInlineEnd and insetBlockEnd flip under dir="rtl". right-* and bottom-* classes do not.
Keep it clear of whatever else sits in that corner: a cookie bar, a chat launcher, toasts, the phone's home indicator.
The button covers the page instead of pushing it, so add bottom padding to the scrolling container to keep the last row reachable.
Think again on a phone, where the button covers far more of the screen and sits under the thumb.
A parent with a transform, a filter or contain: paint holds a FloatButton inside it instead of the window. The examples use contain-paint to keep each button in its frame, so drop that box in your app, and check that no animated wrapper traps the button.