---
category: Components
type: Other
title: FloatButton
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HS-wTIIwu0kAAAAAAAAAAAAADrJ8AQ/original
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a0hwTY_rOSUAAAAAAAAAAAAADrJ8AQ/original
tag: New
---

FloatButton. Available since `4.0.0`.

## When To Use

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

## API

> This component is available since `ant-design-vue@4.0.0`.

### common API

| Property    | Description                                                                      | Type                                | Default   | Version |
| ----------- | -------------------------------------------------------------------------------- | ----------------------------------- | --------- | ------- |
| icon        | Set the icon component of button                                                 | slot                                | -         |         |
| description | Text and other                                                                   | string \| slot                      | -         |         |
| tooltip     | The text shown in the tooltip                                                    | string \| slot                      |           |         |
| type        | Setting button type                                                              | `default` \| `primary`              | `default` |         |
| shape       | Setting button shape                                                             | `circle` \| `square`                | `circle`  |         |
| href        | The target of hyperlink                                                          | string                              | -         |         |
| target      | Specifies where to display the linked URL                                        | string                              | -         |         |
| badge       | Attach Badge to FloatButton. `status` and other props related are not supported. | [BadgeProps](/components/badge#api) | -         |         |

### common events

| Events Name | Description                             | Arguments         | Version |
| ----------- | --------------------------------------- | ----------------- | ------- |
| click       | Set the handler to handle `click` event | `(event) => void` | -       |

### FloatButton.Group

| Property      | Description                              | Type                 | Default  | Version |
| ------------- | ---------------------------------------- | -------------------- | -------- | ------- |
| shape         | Setting button shape of children         | `circle` \| `square` | `circle` |         |
| trigger       | Which action can trigger menu open/close | `click` \| `hover`   | -        |         |
| open(v-model) | Whether the menu is visible or not       | boolean              | -        |         |

### FloatButton.Group Events

| Events Name | Description                                   | Arguments               | Version |
| ----------- | --------------------------------------------- | ----------------------- | ------- |
| openChange  | Callback executed when active menu is changed | (open: boolean) => void | -       |

### FloatButton.BackTop

| Property         | Description                                                                 | Type              | Default      | Version |
| ---------------- | --------------------------------------------------------------------------- | ----------------- | ------------ | ------- |
| duration         | Time to return to top（ms）                                                 | number            | 450          |         |
| 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          |         |
