# FloatButton

- Page: https://jiguang132.com/resources/ant-design/docs/float-button
- Resource: Ant Design (https://jiguang132.com/resources/ant-design.md)
- All guides: https://jiguang132.com/resources/ant-design/docs.md

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](#jguang-common-props)

> This component is available since `antd@5.0.0`.

### common API

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-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](#semantic-dom), string> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), string> | - |  | 6.0.0 |
| content | Text and other | ReactNode | - |  | × |
| ~~description~~ | Please use `content` instead | ReactNode | - |  | × |
| tooltip | The text shown in the tooltip | ReactNode \| [TooltipProps](/components/tooltip#api) | - | 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](#semantic-dom), CSSProperties> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type) | `submit` \| `reset` \| `button` | `button` | 5.21.0 | × |
| badge | Attach Badge to FloatButton. `status` and other props related are not supported. | [BadgeProps](/components/badge#api) | - | 5.4.0 | × |
| disabled | Whether the button is disabled | boolean | - | 6.4.0 | × |

### FloatButton.Group

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-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`

```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 {#jguang-common-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

```bash
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.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt