FloatButton

A button that floats at the top of the page.

When To Use

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

Examples

Basic · basic
Type · type
Shape · shape
Content · content
FloatButton with tooltip · tooltip
FloatButton Group · group
Menu mode · group-menu
Controlled mode · controlled
placement · placement
draggable · draggable
BackTop · back-top
Progress ring · progress-ring
badge · badge
Custom semantic dom styling · style-class

API

Common props ref：Common props

This component is available since antd@5.0.0.

common API

Property	Description	Type	Default	Version	Global Config
icon	Set the icon component of button	ReactNode	-		FloatButton: ×, BackTop: 5.27.0
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-		6.0.0
content	Text and other	ReactNode	-		×
~~description~~	Please use `content` instead	ReactNode	-		×
tooltip	The text shown in the tooltip	ReactNode \| TooltipProps	-	TooltipProps: 5.25.0	×
type	Setting button type	`default` \| `primary`	`default`		×
shape	Setting button shape	`circle` \| `square`	`circle`		×
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-		6.0.0
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	-		×
htmlType	Set the original html `type` of `button`, see: MDN	`submit` \| `reset` \| `button`	`button`	5.21.0	×
badge	Attach Badge to FloatButton. `status` and other props related are not supported.	BadgeProps	-	5.4.0	×
disabled	Whether the button is disabled	boolean	-	6.4.0	×

FloatButton.Group

Property	Description	Type	Default	Version	Global Config
open	Whether the menu is visible or not, use it with trigger	boolean	-		×
closeIcon	Customize close button icon	React.ReactNode	`<CloseOutlined />`		5.16.0
placement	Customize menu animation placement	`top` \| `left` \| `right` \| `bottom`	`top`	5.21.0	×
shape	Setting button shape of children	`circle` \| `square`	`circle`		×
trigger	Which action can trigger menu open/close	`click` \| `hover`	-		×
onOpenChange	Callback executed when active menu is changed, use it with trigger	(open: boolean) => void	-		×
onClick	Set the handler to handle `click` event (only work in `Menu mode`)	(event) => void	-	5.3.0	×

FloatButton.BackTop

Property	Description	Type	Default	Version
duration	Time to return to top (ms). This property is ignored when enables reduced motion (`prefers-reduced-motion: reduce`)	number	450
showProgress	Show the current scroll progress ring around the BackTop button edge	boolean	false	6.6.0
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	-

Semantic DOM

FloatButton

Semantic node	Native description	Version
`root`	Root element with float button base styles, shape size, type theme, fixed positioning, z-index, shadow, spacing and other container styles	—
`icon`	Icon element with button icon size, color, line height, alignment and other icon display styles	—
`content`	Content element with button text content font size, color, alignment, line wrap and other text display styles	—

Semantic description source: vendor/components/float-button/demo/_semantic.tsx

FloatButton.Group

Semantic node	Native description	Version
`root`	Root element with float button group container styles, fixed positioning, z-index, padding, gap, direction mode and other combined layout styles	—
`list`	List element with button group list flex layout, border radius, shadow, animation transition, vertical alignment and other list container styles	—
`item`	Item element with individual float button styles, size, shape, type, state, icon content and other button base styles	—
`itemIcon`	Item icon element with float button icon size, color, alignment and other icon display styles	—
`itemContent`	Item content element with float button text content, badge, description and other content area styles	—
`trigger`	Trigger element with menu mode trigger button styles, shape, icon, hover state, expand/collapse state and other interaction styles	—
`triggerIcon`	Trigger icon element with trigger button icon styles, rotation animation, toggle state and other icon interaction styles	—
`triggerContent`	Trigger content element with trigger button content area text, identifier, state indicator and other content styles	—

Semantic description source: vendor/components/float-button/demo/_semantic_group.tsx

Design Token

Types, inheritance and declarations retain the pinned native source. Defaults are computed by the native theme and may be overridden by ConfigProvider; this table does not invent static defaults.

Native ComponentToken declares no directly extractable own fields. Shared tokens and inheritance are defined by the declarations below.

Declaration source: vendor/components/float-button/style/index.ts

import { initFadeMotion } from '../../style/motion/fade';

import type { FullToken, GetDefaultToken } from '../../theme/internal';

import { genStyleHooks, mergeToken } from '../../theme/internal';

import genFloatButtonStyle from './button';

import genGroupStyle from './group';

/** Component only token. Which will handle additional calculation of alias token */
export type ComponentToken = object;

/**
 * @desc FloatButton 组件的 Token
 * @descEN Token for FloatButton component
 */
export type FloatButtonToken = FullToken<'FloatButton'> & {
  /**
   * @desc FloatButton 尺寸
   * @descEN Size of FloatButton
   */
  floatButtonSize: number;
  /**
   * @desc FloatButton 图标尺寸
   * @descEN Icon size of FloatButton
   */
  floatButtonIconSize: number | string;

  // Position
  /**
   * @desc FloatButton 底部内边距
   * @descEN Bottom inset of FloatButton
   */
  floatButtonInsetBlockEnd: number;
  /**
   * @desc FloatButton 右侧内边距
   * @descEN Right inset of FloatButton
   */
  floatButtonInsetInlineEnd: number;
};

Shared native props

Tips: The following generic properties apply to most antd components; those not supported are described separately.

Property	Description	Type	Default
style	The additional style	CSSProperties	-
className	The additional css class	string	-
rootClassName	ClassName on the root element	string	-
autoFocus	Auto focus when component mounted, only effective for focusable elements like forms, links, etc.	boolean	false

Install and reproduce an example

npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23

Use ConfigProvider and native App; configure dayjs locale separately. Each example lists its complete source files and additional pinned dependencies in View code. Example names select demos, not universal component props. See the resource setup guide for theme, locale and SSR.

Native type references

The source viewer includes unchanged native implementations and the following source declarations. Inherited types remain in their native packages. English source comments are preserved as code reference.

vendor/components/float-button/BackTop.tsx
vendor/components/float-button/FloatButton.tsx
vendor/components/float-button/FloatButtonGroup.tsx
vendor/components/float-button/PurePanel.tsx
vendor/components/float-button/context.ts
vendor/components/float-button/hooks/useScroll.ts
vendor/components/float-button/style/index.ts

Source and license

https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd

Original bilingual prose and executable examples are retained. Website-only embeds and token tables are expanded locally. Ant Design is MIT; separately listed dependency notices also apply. Upload previews block outbound requests and do not provide a backend.