FloatButton

A button that floats above the content rather than sitting in it, on its own or as a group that opens on click or hover.

Preview in Figma LLMs

Overview

Design

Code

FloatButton is Ant Design's FloatButton, Group and BackTop, installed into your project as a file you own. They take the same props. The kit draws their icons from your icon pack: the back-to-top and close icons through AntuikitProvider, and the default button icon in this file.

Install

npx antuikit@latest init

npx antuikit@latest add float-button

The first command installs AntuikitProvider and the theme tokens. The second adds this component.

Import

Import from @/components/ui/float-button, not from antd. The file lives in your project once installed. It exports three names, and FloatButton.Group and FloatButton.BackTop are also attached to FloatButton.

import { FloatButton, BackTop, FloatButtonGroup } from "@/components/ui/float-button"

The axes

Two props take named values. Neither is a size: a FloatButton has one size.

type: default (the default) or primary.
shape: circle (the default) or square. Only square has room for content.
On FloatButton.Group, shape applies to every button inside and wins over their own. A circle group spaces its buttons apart, and a square group joins them into one block.

Flags

disabled follows ConfigProvider's componentDisabled when not passed. A disabled link drops its href and leaves the tab order. A disabled group cannot open, so onOpenChange never fires.
showProgress on BackTop rings the button with the scroll position.
backTop is internal to the preview panel. Use FloatButton.BackTop instead.

Slots

Five props take your markup. Reach for them before a descendant selector.

icon is the glyph. Only a button without text gets the default icon. A FloatButton with no icon and no content shows your pack's file icon.
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.
tooltip takes a node or TooltipProps. It does not name the button, so add an aria-label too.
badge takes no text. It accepts what Badge does except status, text, title and children.
closeIcon belongs to a group with a trigger, and replaces icon on the trigger while the menu is open.

The default icon only goes on a button with no content and no description. If you edit the installed file, keep that check, or every labeled FloatButton gains an icon.

const withFloatIcon = (icon, content, description) => {

if (icon !== undefined) return icon;

if (content !== undefined || description !== undefined) return undefined;

return <Icon name="file" />;

};

Group and BackTop

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 (top by default) start to apply.
Point BackTop at your scroll container. target defaults to the window and visibilityHeight to 400. If your page scrolls inside an element, pass target={() => element}, or BackTop never appears. duration is 450 milliseconds and drops to 0 for readers who prefer reduced motion.
Type each ref from its component. FloatButton, Group and BackTop each have their own ref type, and the exported FloatButtonRef does not fit the plain button. Use ComponentRef<typeof FloatButton>.

// Mirrors in right-to-left layouts

// Stays on the right in right-to-left layouts

FloatButton floats over the page. It is position: fixed in the bottom-right corner of the window, outside your layout. A parent with a transform, a filter or contain: paint holds it inside that parent instead, which is how the examples keep each button in its frame. position: relative does not.

Events

FloatButton takes the DOM's own handlers, like onClick, on the rendered button or link. The group adds onOpenChange, which fires on hover, on a trigger click and on a click outside, and never while the group is disabled.

Styling

classNames and styles take one key per part. FloatButton has root, icon and content. FloatButton.Group has root, list, item, itemIcon, itemContent, trigger, triggerIcon and triggerContent: the item* keys reach every button inside, and the trigger* keys the button that opens the menu. Each key also takes a function of the props.