diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index ea0c76c2de3..29f953c3040 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -14,6 +14,7 @@
 - Fix `n-form-item`'s feedback may hide and show again, closes [#5583](https://github.com/tusen-ai/naive-ui/issues/5583).
 - Fix `n-popselect`'s header make inner input unavailable, closes [#5494](https://github.com/tusen-ai/naive-ui/pull/5494).
 - Fix `n-qr-code`'s style of size.
+- Fix `n-badge` affects child elements' text color.
 
 ### Features
 
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 7ba30fdd31f..79fcc4784b4 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -14,6 +14,7 @@
 - 修复 `n-form-item` 校验结果可能会闪烁的问题，关闭 [#5583](https://github.com/tusen-ai/naive-ui/issues/5583)
 - 修复 `n-popselect` 组件的 header 插槽里 input 无法输入，关闭 [#5494](https://github.com/tusen-ai/naive-ui/pull/5494)
 - 修复 `n-qr-code` 大小样式问题
+- 修复 `n-badge` 会影响子元素的文字颜色
 
 ### Features
 
@@ -28,6 +29,10 @@
 
 - 新增 `etEE` locale
 
+### TODO
+
+menu indent...
+
 ## 2.37.3
 
 ### Fixes
diff --git a/src/badge/src/styles/index.cssr.ts b/src/badge/src/styles/index.cssr.ts
index a785ecb4ea3..c5126f2b846 100644
--- a/src/badge/src/styles/index.cssr.ts
+++ b/src/badge/src/styles/index.cssr.ts
@@ -24,7 +24,6 @@ export default c([
     display: inline-flex;
     position: relative;
     vertical-align: middle;
-    color: var(--n-color);
     font-family: var(--n-font-family);
   `, [
     cM('as-is', [
diff --git a/src/float-button-group/src/FloatButtonGroup.tsx b/src/float-button-group/src/FloatButtonGroup.tsx
index ec3b57cbee2..7d791687951 100644
--- a/src/float-button-group/src/FloatButtonGroup.tsx
+++ b/src/float-button-group/src/FloatButtonGroup.tsx
@@ -3,64 +3,54 @@ import {
   type PropType,
   defineComponent,
   computed,
-  type CSSProperties
+  type CSSProperties,
+  provide,
+  type Ref,
+  toRef
 } from 'vue'
-import type { Size } from '../../button/src/interface'
 import { type ThemeProps, useConfig, useTheme } from '../../_mixins'
-import type { ExtractPublicPropTypes } from '../../_utils'
+import {
+  createInjectionKey,
+  formatLength,
+  type ExtractPublicPropTypes
+} from '../../_utils'
 import style from './styles/index.cssr'
 import floatButtonGroupLight, {
   type FloatButtonGroupTheme
 } from '../styles/light'
 
 export interface ButtonGroupInjection {
-  size?: Size | undefined
+  shapeRef: Ref<'circle' | 'square'>
 }
 
 export const floatButtonGroupProps = {
   ...(useTheme.props as ThemeProps<FloatButtonGroupTheme>),
-  width: {
-    type: [Number, String] as PropType<string | number>,
-    default: 'auto'
-  },
-  height: {
-    type: [Number, String] as PropType<string | number>,
-    default: 'auto'
-  },
-  left: {
-    type: [Number, String] as PropType<string | number>,
-    default: undefined
-  },
-  right: {
-    type: [Number, String] as PropType<string | number>,
-    default: 40
-  },
-  top: {
-    type: [Number, String] as PropType<string | number>,
-    default: undefined
-  },
-  bottom: {
-    type: [Number, String] as PropType<string | number>,
-    default: 40
-  },
-  radius: {
-    type: [Number, String] as PropType<string | number>,
-    default: 22
+  left: [Number, String] as PropType<string | number>,
+  right: [Number, String] as PropType<string | number>,
+  top: [Number, String] as PropType<string | number>,
+  bottom: [Number, String] as PropType<string | number>,
+  shape: {
+    type: String as PropType<'square' | 'circle'>,
+    default: 'circle'
   },
-  backgroundColor: String,
-  vertical: Boolean
+  position: {
+    type: String as PropType<'relative' | 'absolute' | 'fixed'>,
+    default: 'fixed'
+  }
 } as const
 
 export type FloatButtonGroupProps = ExtractPublicPropTypes<
   typeof floatButtonGroupProps
 >
 
+export const floatButtonGroupInjectionKey =
+  createInjectionKey<ButtonGroupInjection>('n-float-button-group')
+
 export default defineComponent({
   name: 'FloatButtonGroup',
   props: floatButtonGroupProps,
   setup (props) {
     const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props)
-
     const themeRef = useTheme(
       'FloatButtonGroup',
       '-float-button-group',
@@ -69,50 +59,40 @@ export default defineComponent({
       props,
       mergedClsPrefixRef
     )
-
     const cssVarsRef = computed(() => {
       const {
-        self: { color, textColor, boxShadow, boxShadowHover, boxShadowPressed },
+        self: { color, boxShadow, buttonBorderColor },
         common: { cubicBezierEaseInOut }
       } = themeRef.value
       return {
         '--n-bezier': cubicBezierEaseInOut,
         '--n-box-shadow': boxShadow,
-        '--n-box-shadow-hover': boxShadowHover,
-        '--n-box-shadow-pressed': boxShadowPressed,
         '--n-color': color,
-        '--n-text-color': textColor,
-        left: formatNumber(props.left),
-        right: formatNumber(props.right),
-        top: formatNumber(props.top),
-        bottom: formatNumber(props.bottom),
-        width: formatNumber(props.width),
-        height: formatNumber(props.height),
-        borderRadius: formatNumber(props.radius),
-        backgroundColor: props.backgroundColor
+        '--n-button-border-color': buttonBorderColor,
+        position: props.position,
+        left: formatLength(props.left),
+        right: formatLength(props.right),
+        top: formatLength(props.top),
+        bottom: formatLength(props.bottom)
       }
     })
 
-    const formatNumber = (
-      value: number | string | undefined
-    ): string | undefined => {
-      if (typeof value === 'number') return `${value}px`
-      return value
-    }
+    provide(floatButtonGroupInjectionKey, {
+      shapeRef: toRef(props, 'shape')
+    })
 
     return {
       cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
-      mergedClsPrefix: mergedClsPrefixRef,
-      formatNumber
+      mergedClsPrefix: mergedClsPrefixRef
     }
   },
   render () {
-    const { mergedClsPrefix, cssVars } = this
+    const { mergedClsPrefix, cssVars, shape } = this
     return (
       <div
         class={[
           `${mergedClsPrefix}-float-button-group`,
-          this.vertical && `${mergedClsPrefix}-float-button-group--vertical`
+          `${mergedClsPrefix}-float-button-group--${shape}-shape`
         ]}
         style={cssVars as CSSProperties}
         role="group"
diff --git a/src/float-button-group/src/styles/index.cssr.ts b/src/float-button-group/src/styles/index.cssr.ts
index 46aba50d488..ecfacaf1446 100644
--- a/src/float-button-group/src/styles/index.cssr.ts
+++ b/src/float-button-group/src/styles/index.cssr.ts
@@ -1,24 +1,47 @@
-import { cB, cM, cNotM } from '../../../_utils/cssr/index'
-
-export default cB('float-button-group', `
-  position: fixed;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--n-text-color);
-  transition:
-    color .3s var(--n-bezier),
-    box-shadow .3s var(--n-bezier),
-    background-color .3s var(--n-bezier);
-`, [
-  cNotM('vertical', {
-    flexDirection: 'row'
-  }, [
+import { c, cB, cE, cM } from '../../../_utils/cssr/index'
 
+export default cB('float-button-group', [
+  cB('float-button', `
+    position: relative;
+  `),
+  cM('square-shape', `
+    background-color: var(--n-color);
+    cursor: pointer;
+    display: flex;
+    width: fit-content;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    flex-direction: column;
+    box-shadow: var(--n-box-shadow);
+    transition:
+      color .3s var(--n-bezier),
+      box-shadow .3s var(--n-bezier),
+      background-color .3s var(--n-bezier);
+  `, [
+    cB('float-button', `
+      background-color: unset;
+      border-radius: 0;
+      box-shadow: none;
+      box-sizing: content-box;
+    `, [
+      c('&:not(:last-child)', `
+        border-bottom: 1px solid var(--n-button-border-color);    
+      `),
+      c('&:first-child', `
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+      `),
+      c('&:last-child', `
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+      `),
+      cE('hover-background', 'inset: 4px; border-radius: 4px;')
+    ])
   ]),
-  cM('vertical', {
-    flexDirection: 'column'
-  }, [
+  cM('circle-shape', [
+    c('>:not(:last-child)', `
+      margin-bottom: 16px;
+    `)
   ])
 ])
diff --git a/src/float-button-group/styles/dark.ts b/src/float-button-group/styles/dark.ts
index 02f4a9a4307..db759d2abb5 100644
--- a/src/float-button-group/styles/dark.ts
+++ b/src/float-button-group/styles/dark.ts
@@ -5,13 +5,11 @@ const floatButtonGroupDark: FloatButtonGroupTheme = {
   name: 'FloatButtonGroup',
   common: commonDark,
   self (vars) {
-    const { popoverColor, textColor2 } = vars
+    const { popoverColor, dividerColor } = vars
     return {
       color: popoverColor,
-      textColor: textColor2,
-      boxShadow: '0 2px 8px 0px rgba(0, 0, 0, .12)',
-      boxShadowHover: '0 2px 12px 0px rgba(0, 0, 0, .18)',
-      boxShadowPressed: '0 2px 12px 0px rgba(0, 0, 0, .18)'
+      buttonBorderColor: dividerColor,
+      boxShadow: '0 2px 8px 0px rgba(0, 0, 0, .12)'
     }
   }
 }
diff --git a/src/float-button-group/styles/light.ts b/src/float-button-group/styles/light.ts
index 25d400578d2..ca6e798397b 100644
--- a/src/float-button-group/styles/light.ts
+++ b/src/float-button-group/styles/light.ts
@@ -3,13 +3,11 @@ import { type ThemeCommonVars } from '../../config-provider'
 import { commonLight } from '../../styles'
 
 const self = (vars: ThemeCommonVars) => {
-  const { popoverColor, textColor2 } = vars
+  const { popoverColor, dividerColor } = vars
   return {
     color: popoverColor,
-    textColor: textColor2,
-    boxShadow: '0 2px 8px 0px rgba(0, 0, 0, .12)',
-    boxShadowHover: '0 2px 12px 0px rgba(0, 0, 0, .18)',
-    boxShadowPressed: '0 2px 12px 0px rgba(0, 0, 0, .18)'
+    buttonBorderColor: dividerColor,
+    boxShadow: '0 2px 8px 0px rgba(0, 0, 0, .12)'
   }
 }
 
diff --git a/src/float-button/demos/enUS/badge.demo.vue b/src/float-button/demos/enUS/badge.demo.vue
index f8688854fdd..c5c9a418fa9 100644
--- a/src/float-button/demos/enUS/badge.demo.vue
+++ b/src/float-button/demos/enUS/badge.demo.vue
@@ -9,42 +9,42 @@
   <div style="height: 200px; transform: translate(0)">
     <n-float-button :right="0" :bottom="0">
       <n-badge :value="9" :offset="[6, -8]">
-        <n-icon :size="22" color="grey">
+        <n-icon :size="22">
           <alarm-outline-icon />
         </n-icon>
       </n-badge>
     </n-float-button>
     <n-float-button :right="70" :bottom="0">
       <n-badge :value="100" :max="99" :offset="[6, -8]">
-        <n-icon :size="22" color="grey">
+        <n-icon :size="22">
           <alarm-outline-icon />
         </n-icon>
       </n-badge>
     </n-float-button>
     <n-float-button :right="142" :bottom="0">
       <n-badge dot :offset="[4, -4]">
-        <n-icon :size="22" color="grey">
+        <n-icon :size="22">
           <alarm-outline-icon />
         </n-icon>
       </n-badge>
     </n-float-button>
     <n-float-button :right="142" :bottom="0">
       <n-badge dot :offset="[4, -4]">
-        <n-icon :size="22" color="grey">
+        <n-icon :size="22">
           <alarm-outline-icon />
         </n-icon>
       </n-badge>
     </n-float-button>
     <n-float-button :right="0" :bottom="60">
       <n-badge value="New" :offset="[10, -10]">
-        <n-icon :size="22" color="grey">
+        <n-icon :size="22">
           <alarm-outline-icon />
         </n-icon>
       </n-badge>
     </n-float-button>
     <n-float-button :right="70" :bottom="60">
-      <n-badge :value="9" :offset="[6, -8]" color="grey">
-        <n-icon :size="22" color="grey">
+      <n-badge :value="9" :offset="[6, -8]">
+        <n-icon :size="22">
           <alarm-outline-icon />
         </n-icon>
       </n-badge>
diff --git a/src/float-button/demos/enUS/basic.demo.vue b/src/float-button/demos/enUS/basic.demo.vue
index a8d06f0a0f8..92bb47219ae 100644
--- a/src/float-button/demos/enUS/basic.demo.vue
+++ b/src/float-button/demos/enUS/basic.demo.vue
@@ -4,23 +4,23 @@
 
 <template>
   <div style="height: 200px; transform: translate(0)">
-    <n-float-button :right="0" :bottom="0">
-      <n-icon :size="24">
+    <n-float-button :right="0" :bottom="0" shape="square">
+      <n-icon>
         <cash-icon />
       </n-icon>
     </n-float-button>
-    <n-float-button :left="0" :bottom="0">
-      <n-icon :size="24">
+    <n-float-button :left="0" :bottom="0" shape="square">
+      <n-icon>
         <cash-icon />
       </n-icon>
     </n-float-button>
     <n-float-button :right="0" :top="0">
-      <n-icon :size="24">
+      <n-icon>
         <cash-icon />
       </n-icon>
     </n-float-button>
     <n-float-button :left="0" :top="0">
-      <n-icon :size="24">
+      <n-icon>
         <cash-icon />
       </n-icon>
     </n-float-button>
diff --git a/src/float-button/demos/enUS/custom.demo.vue b/src/float-button/demos/enUS/custom.demo.vue
index 4c132c7306f..a6a6728ea26 100644
--- a/src/float-button/demos/enUS/custom.demo.vue
+++ b/src/float-button/demos/enUS/custom.demo.vue
@@ -1,38 +1,31 @@
 <markdown>
-  # Custom Dom
-
-  You can put any element you want.
+# Description
 
+Show description on float button.
 </markdown>
 
 <template>
-  <div style="height: 200px; transform: translate(0)">
-    <n-float-button
-      :right="0"
-      :bottom="60"
-      height="auto"
-      width="auto"
-      :radius="10"
-    >
-      <n-flex
-        vertical
-        :style="{ padding: '4px', textAlign: 'center' }"
-        align="center"
-      >
-        <n-icon :size="24">
-          <document-icon />
-        </n-icon>
-        <span> Document </span>
-      </n-flex>
+  <div style="height: 120px; transform: translate(0)">
+    <n-float-button style="border-radius: 6px">
+      <n-icon>
+        <document-icon />
+      </n-icon>
+      <template #description>
+        Docs
+      </template>
     </n-float-button>
-
-    <n-float-button :right="0" :left="0" :bottom="0" width="100%" :radius="10">
-      <n-flex align="center">
-        <n-icon :size="24">
-          <document-icon />
-        </n-icon>
-        <span> Document </span>
-      </n-flex>
+    <n-float-button :left="60" style="border-radius: 6px">
+      <template #description>
+        Docs
+      </template>
+    </n-float-button>
+    <n-float-button :left="120" style="border-radius: 6px">
+      <n-icon>
+        <document-icon />
+      </n-icon>
+      <template #description>
+        Long Long Docs
+      </template>
     </n-float-button>
   </div>
 </template>
diff --git a/src/float-button/demos/enUS/group.demo.vue b/src/float-button/demos/enUS/group.demo.vue
index 3e0cc305f0c..d2a3863534c 100644
--- a/src/float-button/demos/enUS/group.demo.vue
+++ b/src/float-button/demos/enUS/group.demo.vue
@@ -6,67 +6,36 @@
 </markdown>
 
 <template>
-  <div style="height: 200px; transform: translate(0)">
-    <n-float-button-group
-      :left="0"
-      right="auto"
-      :bottom="0"
-      vertical
-      background-color="lightgrey"
-    >
-      <n-button
-        tertiary
-        circle
-        type="primary"
-        :style="{ marginBottom: '20px' }"
-      >
-        <template #icon>
-          <n-icon><cash-icon /></n-icon>
-        </template>
-      </n-button>
-      <n-button tertiary circle type="info" :style="{ marginBottom: '20px' }">
-        <template #icon>
-          <n-icon><cash-icon /></n-icon>
-        </template>
-      </n-button>
-      <n-button
-        tertiary
-        circle
-        type="success"
-        :style="{ marginBottom: '20px' }"
-      >
+  <n-flex align="flex-start">
+    <n-float-button-group shape="square" position="relative">
+      <n-float-button>
         <n-icon><cash-icon /></n-icon>
-      </n-button>
-      <n-button tertiary circle type="warning">
-        <template #icon>
-          <n-icon><cash-icon /></n-icon>
-        </template>
-      </n-button>
+      </n-float-button>
+      <n-float-button>
+        <n-icon><cash-icon /></n-icon>
+      </n-float-button>
+      <n-float-button>
+        <n-icon><cash-icon /></n-icon>
+      </n-float-button>
+      <n-float-button>
+        <n-icon><cash-icon /></n-icon>
+      </n-float-button>
     </n-float-button-group>
-
-    <n-float-button-group :right="0" :bottom="0">
-      <n-flex vertical>
-        <n-button tertiary circle type="primary">
-          <template #icon>
-            <n-icon><cash-icon /></n-icon>
-          </template>
-        </n-button>
-        <n-button tertiary circle type="info">
-          <template #icon>
-            <n-icon><cash-icon /></n-icon>
-          </template>
-        </n-button>
-        <n-button tertiary circle type="success">
-          <n-icon><cash-icon /></n-icon>
-        </n-button>
-        <n-button tertiary circle type="warning">
-          <template #icon>
-            <n-icon><cash-icon /></n-icon>
-          </template>
-        </n-button>
-      </n-flex>
+    <n-float-button-group position="relative">
+      <n-float-button>
+        <n-icon><cash-icon /></n-icon>
+      </n-float-button>
+      <n-float-button>
+        <n-icon><cash-icon /></n-icon>
+      </n-float-button>
+      <n-float-button>
+        <n-icon><cash-icon /></n-icon>
+      </n-float-button>
+      <n-float-button>
+        <n-icon><cash-icon /></n-icon>
+      </n-float-button>
     </n-float-button-group>
-  </div>
+  </n-flex>
 </template>
 
 <script lang="ts">
diff --git a/src/float-button/demos/enUS/index.demo-entry.md b/src/float-button/demos/enUS/index.demo-entry.md
index 43f720d6aef..6dfb25e903b 100644
--- a/src/float-button/demos/enUS/index.demo-entry.md
+++ b/src/float-button/demos/enUS/index.demo-entry.md
@@ -16,29 +16,37 @@ group.vue
 
 ## API
 
-### Float Button Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| width | `number \| string` | `40` | The width. |
-| height | `number \| string` | `40` | The height. |
-| left | `number \| string` | `40` | The width from the left side of the page. |
-| right | `number \| string` | `40` | The width from the right side of the page. |
-| top | `number \| string` | `40` | The height from the top of the page. |
-| bottom | `number \| string` | `40` | The height from the bottom of the page. |
-| background-color | `string` | `#ffffff` | Background color. |
-| radius | `number \| string` | `22` | The radius. |
-
-### Float Button Group Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| width | `number \| string` | `40` | The width |
-| height | `number \| string` | `40` | The height |
-| left | `number \| string` | `40` | The width from the left side of the page |
-| right | `number \| string` | `40` | The width from the right side of the page |
-| top | `number \| string` | `40` | The height from the top of the page |
-| bottom | `number \| string` | `40` | The height from the bottom of the page |
-| radius | `number \| string` | `22` | The radius |
-| background-color | `string` | `undefined` | Background color. |
-| vertical | `boolean` | `undefined` | The direction of the child elements |
+### FloatButton Props
+
+| Name | Type | Default | Description | NEXT_VERSION |
+| --- | --- | --- | --- | --- |
+| bottom | `number \| string` | `40` | 距离页面底部的高度 | NEXT_VERSION |
+| height | `number \| string` | `40` | 高度 | NEXT_VERSION |
+| left | `number \| string` | `undefined` | 距离页面左侧的宽度 | NEXT_VERSION |
+| menu-trigger | `'click' \| 'hover'` | `undefined` | 触发菜单显示的方式 | NEXT_VERSION |
+| position | `'relative' \| 'absolute' \| 'fixed'` | `'fixed'` | 按钮组的定位方式 | NEXT_VERSION |
+| right | `number \| string` | `undefined` | 距离页面右侧的宽度 | NEXT_VERSION |
+| shape | `'circle' \| 'square'` | `'circle'` | 按钮的形状 | NEXT_VERSION |
+| show-menu | `boolean` | `undefined` | 是否打开菜单 | NEXT_VERSION |
+| top | `number \| string` | `undefined` | 距离页面顶部的高度 | NEXT_VERSION |
+| type | `'default' \| 'primary'` | `'default'` | 按钮的类型 | NEXT_VERSION |
+| width | `number \| string` | `undefined` | 宽度 | NEXT_VERSION |
+| on-update:show-menu | `(value: boolean) => void` | `undefined` | 菜单打开或者关闭的回调 | NEXT_VERSION |
+
+### FloatButtonGroup Props
+
+| Name | Type | Default | Description | NEXT_VERSION |
+| --- | --- | --- | --- | --- |
+| bottom | `number \| string` | `undefined` | 距离页面底部的高度 | NEXT_VERSION |
+| left | `number \| string` | `undefined` | 距离页面左侧的宽度 | NEXT_VERSION |
+| position | `'relative' \| 'absolute' \| 'fixed'` | `'fixed'` | 按钮组的定位方式 | NEXT_VERSION |
+| right | `number \| string` | `undefined` | 距离页面右侧的宽度 | NEXT_VERSION |
+| shape | `'circle' \| 'square'` | `'circle'` | 按钮组的形状 | NEXT_VERSION |
+| top | `number \| string` | `undefined` | 距离页面顶部的高度 | NEXT_VERSION |
+
+### FloatButton Slots
+
+| Name        | Parameters | Description        | Version      |
+| ----------- | ---------- | ------------------ | ------------ |
+| description | `()`       | 按钮中的描述信息   | NEXT_VERSION |
+| menu        | `()`       | 按钮会触发的子菜单 | NEXT_VERSION |
diff --git a/src/float-button/demos/enUS/menu.demo.vue b/src/float-button/demos/enUS/menu.demo.vue
new file mode 100644
index 00000000000..5e984e53b6f
--- /dev/null
+++ b/src/float-button/demos/enUS/menu.demo.vue
@@ -0,0 +1,65 @@
+<markdown>
+# 菜单显示
+
+设定 `menu-trigger` 后，更多的 `n-float-button` 可被折叠于一个 `n-float-button` 中。
+</markdown>
+
+<template>
+  <n-flex>
+    <n-float-button position="relative" type="primary" menu-trigger="hover">
+      <n-icon>
+        <cash-icon />
+      </n-icon>
+      <template #menu>
+        <n-float-button shape="square" type="primary">
+          <n-icon>
+            <cash-icon />
+          </n-icon>
+        </n-float-button>
+        <n-float-button>
+          <n-icon>
+            <cash-icon />
+          </n-icon>
+        </n-float-button>
+        <n-float-button>
+          <n-icon>
+            <cash-icon />
+          </n-icon>
+        </n-float-button>
+      </template>
+    </n-float-button>
+    <n-float-button position="relative" type="primary" menu-trigger="click">
+      <n-icon>
+        <cash-icon />
+      </n-icon>
+      <template #menu>
+        <n-float-button shape="square" type="primary">
+          <n-icon>
+            <cash-icon />
+          </n-icon>
+        </n-float-button>
+        <n-float-button>
+          <n-icon>
+            <cash-icon />
+          </n-icon>
+        </n-float-button>
+        <n-float-button>
+          <n-icon>
+            <cash-icon />
+          </n-icon>
+        </n-float-button>
+      </template>
+    </n-float-button>
+  </n-flex>
+</template>
+
+<script lang="ts">
+import { CashOutline as CashIcon } from '@vicons/ionicons5'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  components: {
+    CashIcon
+  }
+})
+</script>
diff --git a/src/float-button/demos/enUS/tooltip.demo.vue b/src/float-button/demos/enUS/tooltip.demo.vue
index a27771081ea..137e8e1c92f 100644
--- a/src/float-button/demos/enUS/tooltip.demo.vue
+++ b/src/float-button/demos/enUS/tooltip.demo.vue
@@ -3,18 +3,16 @@
 </markdown>
 
 <template>
-  <div style="height: 200px; transform: translate(0)">
-    <n-tooltip trigger="hover" placement="left">
-      <template #trigger>
-        <n-float-button :right="0" :bottom="0">
-          <n-icon :size="24">
-            <cash-icon />
-          </n-icon>
-        </n-float-button>
-      </template>
-      This story is not over.
-    </n-tooltip>
-  </div>
+  <n-tooltip trigger="hover" placement="right">
+    <template #trigger>
+      <n-float-button position="relative">
+        <n-icon>
+          <cash-icon />
+        </n-icon>
+      </n-float-button>
+    </template>
+    This story is not over.
+  </n-tooltip>
 </template>
 
 <script lang="ts">
diff --git a/src/float-button/demos/zhCN/badge.demo.vue b/src/float-button/demos/zhCN/badge.demo.vue
index bf3e10ef5fb..bb8f21b6a9b 100644
--- a/src/float-button/demos/zhCN/badge.demo.vue
+++ b/src/float-button/demos/zhCN/badge.demo.vue
@@ -9,42 +9,42 @@
   <div style="height: 200px; transform: translate(0)">
     <n-float-button :right="0" :bottom="0">
       <n-badge :value="9" :offset="[6, -8]">
-        <n-icon :size="22" color="grey">
+        <n-icon>
           <alarm-outline-icon />
         </n-icon>
       </n-badge>
     </n-float-button>
     <n-float-button :right="70" :bottom="0">
       <n-badge :value="100" :max="99" :offset="[6, -8]">
-        <n-icon :size="22" color="grey">
+        <n-icon>
           <alarm-outline-icon />
         </n-icon>
       </n-badge>
     </n-float-button>
     <n-float-button :right="142" :bottom="0">
       <n-badge dot :offset="[4, -4]">
-        <n-icon :size="22" color="grey">
+        <n-icon>
           <alarm-outline-icon />
         </n-icon>
       </n-badge>
     </n-float-button>
     <n-float-button :right="142" :bottom="0">
       <n-badge dot :offset="[4, -4]">
-        <n-icon :size="22" color="grey">
+        <n-icon>
           <alarm-outline-icon />
         </n-icon>
       </n-badge>
     </n-float-button>
     <n-float-button :right="0" :bottom="60">
       <n-badge value="新" :offset="[6, -6]">
-        <n-icon :size="22" color="grey">
+        <n-icon>
           <alarm-outline-icon />
         </n-icon>
       </n-badge>
     </n-float-button>
     <n-float-button :right="70" :bottom="60">
-      <n-badge :value="9" :offset="[6, -8]" color="grey">
-        <n-icon :size="22" color="grey">
+      <n-badge :value="9" :offset="[6, -8]">
+        <n-icon>
           <alarm-outline-icon />
         </n-icon>
       </n-badge>
diff --git a/src/float-button/demos/zhCN/basic.demo.vue b/src/float-button/demos/zhCN/basic.demo.vue
index e1739badc9a..061a1cdfd5c 100644
--- a/src/float-button/demos/zhCN/basic.demo.vue
+++ b/src/float-button/demos/zhCN/basic.demo.vue
@@ -4,23 +4,23 @@
 
 <template>
   <div style="height: 200px; transform: translate(0)">
-    <n-float-button :right="0" :bottom="0">
-      <n-icon :size="24">
+    <n-float-button :right="0" :bottom="0" shape="square">
+      <n-icon>
         <cash-icon />
       </n-icon>
     </n-float-button>
-    <n-float-button :left="0" :bottom="0">
-      <n-icon :size="24">
+    <n-float-button :left="0" :bottom="0" shape="square" type="primary">
+      <n-icon>
         <cash-icon />
       </n-icon>
     </n-float-button>
     <n-float-button :right="0" :top="0">
-      <n-icon :size="24">
+      <n-icon>
         <cash-icon />
       </n-icon>
     </n-float-button>
-    <n-float-button :left="0" :top="0">
-      <n-icon :size="24">
+    <n-float-button :left="0" :top="0" type="primary">
+      <n-icon>
         <cash-icon />
       </n-icon>
     </n-float-button>
diff --git a/src/float-button/demos/zhCN/custom.demo.vue b/src/float-button/demos/zhCN/custom.demo.vue
index f841944e81d..59b10dd6729 100644
--- a/src/float-button/demos/zhCN/custom.demo.vue
+++ b/src/float-button/demos/zhCN/custom.demo.vue
@@ -1,38 +1,31 @@
 <markdown>
-  # 自定义元素
-
-  可以放任意元素
+# 描述
 
+在 `n-float-button` 上展示描述信息。
 </markdown>
 
 <template>
-  <div style="height: 200px; transform: translate(0)">
-    <n-float-button
-      :right="0"
-      :bottom="60"
-      height="auto"
-      width="auto"
-      :radius="10"
-    >
-      <n-flex
-        vertical
-        :style="{ padding: '4px', textAlign: 'center' }"
-        align="center"
-      >
-        <n-icon :size="24">
-          <document-icon />
-        </n-icon>
-        <span> 文档 </span>
-      </n-flex>
+  <div style="height: 120px; transform: translate(0)">
+    <n-float-button style="border-radius: 6px">
+      <n-icon>
+        <document-icon />
+      </n-icon>
+      <template #description>
+        文档
+      </template>
     </n-float-button>
-
-    <n-float-button :right="0" :left="0" :bottom="0" width="100%" :radius="10">
-      <n-flex align="center">
-        <n-icon :size="24">
-          <document-icon />
-        </n-icon>
-        <span> 文档 </span>
-      </n-flex>
+    <n-float-button :left="60" style="border-radius: 6px">
+      <template #description>
+        文档
+      </template>
+    </n-float-button>
+    <n-float-button :left="120" style="border-radius: 6px">
+      <n-icon>
+        <document-icon />
+      </n-icon>
+      <template #description>
+        很长很长的文档
+      </template>
     </n-float-button>
   </div>
 </template>
diff --git a/src/float-button/demos/zhCN/group.demo.vue b/src/float-button/demos/zhCN/group.demo.vue
index 30e35b4e74a..c121e8114f6 100644
--- a/src/float-button/demos/zhCN/group.demo.vue
+++ b/src/float-button/demos/zhCN/group.demo.vue
@@ -5,67 +5,36 @@
 </markdown>
 
 <template>
-  <div style="height: 200px; transform: translate(0)">
-    <n-float-button-group
-      :left="0"
-      right="auto"
-      :bottom="0"
-      vertical
-      background-color="lightgrey"
-    >
-      <n-button
-        tertiary
-        circle
-        type="primary"
-        :style="{ marginBottom: '20px' }"
-      >
-        <template #icon>
-          <n-icon><cash-icon /></n-icon>
-        </template>
-      </n-button>
-      <n-button tertiary circle type="info" :style="{ marginBottom: '20px' }">
-        <template #icon>
-          <n-icon><cash-icon /></n-icon>
-        </template>
-      </n-button>
-      <n-button
-        tertiary
-        circle
-        type="success"
-        :style="{ marginBottom: '20px' }"
-      >
+  <n-flex align="flex-start">
+    <n-float-button-group shape="square" position="relative">
+      <n-float-button>
         <n-icon><cash-icon /></n-icon>
-      </n-button>
-      <n-button tertiary circle type="warning">
-        <template #icon>
-          <n-icon><cash-icon /></n-icon>
-        </template>
-      </n-button>
+      </n-float-button>
+      <n-float-button>
+        <n-icon><cash-icon /></n-icon>
+      </n-float-button>
+      <n-float-button>
+        <n-icon><cash-icon /></n-icon>
+      </n-float-button>
+      <n-float-button>
+        <n-icon><cash-icon /></n-icon>
+      </n-float-button>
     </n-float-button-group>
-
-    <n-float-button-group :right="0" :bottom="0">
-      <n-flex vertical>
-        <n-button tertiary circle type="primary">
-          <template #icon>
-            <n-icon><cash-icon /></n-icon>
-          </template>
-        </n-button>
-        <n-button tertiary circle type="info">
-          <template #icon>
-            <n-icon><cash-icon /></n-icon>
-          </template>
-        </n-button>
-        <n-button tertiary circle type="success">
-          <n-icon><cash-icon /></n-icon>
-        </n-button>
-        <n-button tertiary circle type="warning">
-          <template #icon>
-            <n-icon><cash-icon /></n-icon>
-          </template>
-        </n-button>
-      </n-flex>
+    <n-float-button-group position="relative">
+      <n-float-button>
+        <n-icon><cash-icon /></n-icon>
+      </n-float-button>
+      <n-float-button>
+        <n-icon><cash-icon /></n-icon>
+      </n-float-button>
+      <n-float-button>
+        <n-icon><cash-icon /></n-icon>
+      </n-float-button>
+      <n-float-button>
+        <n-icon><cash-icon /></n-icon>
+      </n-float-button>
     </n-float-button-group>
-  </div>
+  </n-flex>
 </template>
 
 <script lang="ts">
diff --git a/src/float-button/demos/zhCN/index.demo-entry.md b/src/float-button/demos/zhCN/index.demo-entry.md
index af696da209e..4b2aa4db39f 100644
--- a/src/float-button/demos/zhCN/index.demo-entry.md
+++ b/src/float-button/demos/zhCN/index.demo-entry.md
@@ -12,33 +12,42 @@ badge.vue
 tooltip.vue
 custom.vue
 group.vue
+menu.vue
 ```
 
 ## API
 
-### Float Button Props
-
-| 名称             | 类型               | 默认值    | 说明               |
-| ---------------- | ------------------ | --------- | ------------------ |
-| width            | `number \| string` | `40`      | 宽度               |
-| height           | `number \| string` | `40`      | 高度               |
-| left             | `number \| string` | `40`      | 距离页面左侧的宽度 |
-| right            | `number \| string` | `40`      | 距离页面右侧的宽度 |
-| top              | `number \| string` | `40`      | 距离页面顶部的高度 |
-| bottom           | `number \| string` | `40`      | 距离页面底部的高度 |
-| radius           | `number \| string` | `22`      | 圆角               |
-| background-color | `string`           | `#ffffff` | 背景色             |
-
-### Float Button Group Props
-
-| 名称             | 类型               | 默认值      | 说明               |
-| ---------------- | ------------------ | ----------- | ------------------ |
-| width            | `number \| string` | `40`        | 宽度               |
-| height           | `number \| string` | `40`        | 高度               |
-| left             | `number \| string` | `40`        | 距离页面左侧的宽度 |
-| right            | `number \| string` | `40`        | 距离页面右侧的宽度 |
-| top              | `number \| string` | `40`        | 距离页面顶部的高度 |
-| bottom           | `number \| string` | `40`        | 距离页面底部的高度 |
-| radius           | `number \| string` | `22`        | 圆角               |
-| background-color | `string`           | `undefined` | 背景色             |
-| vertical         | `boolean`          | `undefined` | 子元素排列的方向   |
+### FloatButton Props
+
+| 名称 | 类型 | 默认值 | 说明 | 版本 |
+| --- | --- | --- | --- | --- |
+| bottom | `number \| string` | `40` | 距离页面底部的高度 | NEXT_VERSION |
+| height | `number \| string` | `40` | 高度 | NEXT_VERSION |
+| left | `number \| string` | `undefined` | 距离页面左侧的宽度 | NEXT_VERSION |
+| menu-trigger | `'click' \| 'hover'` | `undefined` | 触发菜单显示的方式 | NEXT_VERSION |
+| position | `'relative' \| 'absolute' \| 'fixed'` | `'fixed'` | 按钮组的定位方式 | NEXT_VERSION |
+| right | `number \| string` | `undefined` | 距离页面右侧的宽度 | NEXT_VERSION |
+| shape | `'circle' \| 'square'` | `'circle'` | 按钮的形状 | NEXT_VERSION |
+| show-menu | `boolean` | `undefined` | 是否打开菜单 | NEXT_VERSION |
+| top | `number \| string` | `undefined` | 距离页面顶部的高度 | NEXT_VERSION |
+| type | `'default' \| 'primary'` | `'default'` | 按钮的类型 | NEXT_VERSION |
+| width | `number \| string` | `undefined` | 宽度 | NEXT_VERSION |
+| on-update:show-menu | `(value: boolean) => void` | `undefined` | 菜单打开或者关闭的回调 | NEXT_VERSION |
+
+### FloatButtonGroup Props
+
+| 名称 | 类型 | 默认值 | 说明 | 版本 |
+| --- | --- | --- | --- | --- |
+| bottom | `number \| string` | `undefined` | 距离页面底部的高度 | NEXT_VERSION |
+| left | `number \| string` | `undefined` | 距离页面左侧的宽度 | NEXT_VERSION |
+| position | `'relative' \| 'absolute' \| 'fixed'` | `'fixed'` | 按钮组的定位方式 | NEXT_VERSION |
+| right | `number \| string` | `undefined` | 距离页面右侧的宽度 | NEXT_VERSION |
+| shape | `'circle' \| 'square'` | `'circle'` | 按钮组的形状 | NEXT_VERSION |
+| top | `number \| string` | `undefined` | 距离页面顶部的高度 | NEXT_VERSION |
+
+### FloatButton Slots
+
+| 名称        | 参数 | 说明               | 版本         |
+| ----------- | ---- | ------------------ | ------------ |
+| description | `()` | 按钮中的描述信息   | NEXT_VERSION |
+| menu        | `()` | 按钮会触发的子菜单 | NEXT_VERSION |
diff --git a/src/float-button/demos/zhCN/menu.demo.vue b/src/float-button/demos/zhCN/menu.demo.vue
new file mode 100644
index 00000000000..5e984e53b6f
--- /dev/null
+++ b/src/float-button/demos/zhCN/menu.demo.vue
@@ -0,0 +1,65 @@
+<markdown>
+# 菜单显示
+
+设定 `menu-trigger` 后，更多的 `n-float-button` 可被折叠于一个 `n-float-button` 中。
+</markdown>
+
+<template>
+  <n-flex>
+    <n-float-button position="relative" type="primary" menu-trigger="hover">
+      <n-icon>
+        <cash-icon />
+      </n-icon>
+      <template #menu>
+        <n-float-button shape="square" type="primary">
+          <n-icon>
+            <cash-icon />
+          </n-icon>
+        </n-float-button>
+        <n-float-button>
+          <n-icon>
+            <cash-icon />
+          </n-icon>
+        </n-float-button>
+        <n-float-button>
+          <n-icon>
+            <cash-icon />
+          </n-icon>
+        </n-float-button>
+      </template>
+    </n-float-button>
+    <n-float-button position="relative" type="primary" menu-trigger="click">
+      <n-icon>
+        <cash-icon />
+      </n-icon>
+      <template #menu>
+        <n-float-button shape="square" type="primary">
+          <n-icon>
+            <cash-icon />
+          </n-icon>
+        </n-float-button>
+        <n-float-button>
+          <n-icon>
+            <cash-icon />
+          </n-icon>
+        </n-float-button>
+        <n-float-button>
+          <n-icon>
+            <cash-icon />
+          </n-icon>
+        </n-float-button>
+      </template>
+    </n-float-button>
+  </n-flex>
+</template>
+
+<script lang="ts">
+import { CashOutline as CashIcon } from '@vicons/ionicons5'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  components: {
+    CashIcon
+  }
+})
+</script>
diff --git a/src/float-button/demos/zhCN/tooltip.demo.vue b/src/float-button/demos/zhCN/tooltip.demo.vue
index e34d249671b..d3a9cbefa18 100644
--- a/src/float-button/demos/zhCN/tooltip.demo.vue
+++ b/src/float-button/demos/zhCN/tooltip.demo.vue
@@ -1,20 +1,18 @@
 <markdown>
-  # 气泡提示
+# 气泡提示
 </markdown>
 
 <template>
-  <div style="height: 200px; transform: translate(0)">
-    <n-tooltip trigger="hover" placement="left">
-      <template #trigger>
-        <n-float-button :right="0" :bottom="0">
-          <n-icon :size="24">
-            <cash-icon />
-          </n-icon>
-        </n-float-button>
-      </template>
-      这个故事还没有完结
-    </n-tooltip>
-  </div>
+  <n-tooltip trigger="hover" placement="right">
+    <template #trigger>
+      <n-float-button position="relative">
+        <n-icon>
+          <cash-icon />
+        </n-icon>
+      </n-float-button>
+    </template>
+    这个故事还没有完结
+  </n-tooltip>
 </template>
 
 <script lang="ts">
diff --git a/src/float-button/src/FloatButton.tsx b/src/float-button/src/FloatButton.tsx
index 7a0cb718109..600507a9425 100644
--- a/src/float-button/src/FloatButton.tsx
+++ b/src/float-button/src/FloatButton.tsx
@@ -3,47 +3,63 @@ import {
   defineComponent,
   type PropType,
   computed,
-  type CSSProperties
+  type CSSProperties,
+  inject,
+  ref,
+  toRef,
+  withDirectives,
+  type DirectiveArguments
 } from 'vue'
-import { type ExtractPublicPropTypes } from '../../_utils'
+import { useMergedState } from 'vooks'
+import { mousemoveoutside } from 'vdirs'
+import { floatButtonGroupInjectionKey } from '../../float-button-group/src/FloatButtonGroup'
+import {
+  formatLength,
+  type ExtractPublicPropTypes,
+  resolveWrappedSlot,
+  resolveSlot,
+  type MaybeArray,
+  call
+} from '../../_utils'
 import useConfig from '../../_mixins/use-config'
-import style from './styles/index.cssr'
 import { type ThemeProps, useTheme } from '../../_mixins'
 import { type FloatButtonTheme, floatButtonLight } from '../styles'
+import style from './styles/index.cssr'
+import { NBaseIcon } from '../../_internal'
+import { CloseIcon } from '../../_internal/icons'
 
 export const floatButtonProps = {
   ...(useTheme.props as ThemeProps<FloatButtonTheme>),
-  width: {
-    type: [Number, String] as PropType<string | number>,
-    default: 40
+  width: { type: [Number, String] as PropType<string | number>, default: 40 },
+  height: { type: [Number, String] as PropType<string | number>, default: 40 },
+  left: [Number, String] as PropType<string | number>,
+  right: [Number, String] as PropType<string | number>,
+  top: [Number, String] as PropType<string | number>,
+  bottom: [Number, String] as PropType<string | number>,
+  shape: {
+    type: String as PropType<'square' | 'circle'>,
+    default: 'circle'
   },
-  height: {
-    type: [Number, String] as PropType<string | number>,
-    default: 40
+  position: {
+    type: String as PropType<'relative' | 'absolute' | 'fixed'>,
+    default: 'fixed'
   },
-  left: {
-    type: [Number, String] as PropType<string | number>,
-    default: undefined
+  type: {
+    type: String as PropType<'default' | 'primary'>,
+    default: 'default'
   },
-  right: {
-    type: [Number, String] as PropType<string | number>,
-    default: 40
-  },
-  top: {
-    type: [Number, String] as PropType<string | number>,
+  menuTrigger: String as PropType<'hover' | 'click'>,
+  showMenu: {
+    type: Boolean,
     default: undefined
   },
-  bottom: {
-    type: [Number, String] as PropType<string | number>,
-    default: 40
-  },
-  radius: {
-    type: [Number, String] as PropType<string | number>,
-    default: 22
+  onUpdateShowMenu: {
+    type: [Function, Array] as PropType<MaybeArray<(value: boolean) => void>>,
+    default: undefined
   },
-  backgroundColor: {
-    type: String,
-    default: '#ffffff'
+  'onUpdate:showMenu': {
+    type: [Function, Array] as PropType<MaybeArray<(value: boolean) => void>>,
+    default: undefined
   }
 } as const
 
@@ -64,53 +80,160 @@ export default defineComponent({
       mergedClsPrefixRef
     )
 
+    const floatButtonGroupInjection = inject(floatButtonGroupInjectionKey)
+
+    const uncontrolledShowMenuRef = ref(false)
+    const controlledShoeMenuRef = toRef(props, 'showMenu')
+    const mergedShowMenuRef = useMergedState(
+      controlledShoeMenuRef,
+      uncontrolledShowMenuRef
+    )
+
+    function doUpdateShowMenu (value: boolean): void {
+      const { onUpdateShowMenu, 'onUpdate:showMenu': _onUpdateShowMenu } = props
+      uncontrolledShowMenuRef.value = value
+      if (onUpdateShowMenu) {
+        call(onUpdateShowMenu, value)
+      }
+      if (_onUpdateShowMenu) {
+        call(_onUpdateShowMenu, value)
+      }
+    }
+
     const cssVarsRef = computed(() => {
       const {
-        self: { color, textColor, boxShadow, boxShadowHover, boxShadowPressed },
+        self: {
+          color,
+          textColor,
+          boxShadow,
+          boxShadowHover,
+          boxShadowPressed,
+          colorHover,
+          colorPrimary,
+          colorPrimaryHover,
+          textColorPrimary
+        },
         common: { cubicBezierEaseInOut }
       } = themeRef.value
+      const { width, height, type } = props
       return {
         '--n-bezier': cubicBezierEaseInOut,
         '--n-box-shadow': boxShadow,
         '--n-box-shadow-hover': boxShadowHover,
         '--n-box-shadow-pressed': boxShadowPressed,
-        '--n-color': color,
-        '--n-text-color': textColor,
-        left: formatNumber(props.left),
-        right: formatNumber(props.right),
-        top: formatNumber(props.top),
-        bottom: formatNumber(props.bottom),
-        width: formatNumber(props.width),
-        height: formatNumber(props.height),
-        borderRadius: formatNumber(props.radius),
-        backgroundColor: props.backgroundColor
+        '--n-color': type === 'primary' ? colorPrimary : color,
+        '--n-text-color': type === 'primary' ? textColorPrimary : textColor,
+        '--n-color-hover': type === 'primary' ? colorPrimaryHover : colorHover,
+        position: floatButtonGroupInjection ? undefined : props.position,
+        width: formatLength(width),
+        minHeight: formatLength(height),
+        ...(floatButtonGroupInjection
+          ? null
+          : {
+              left: formatLength(props.left),
+              right: formatLength(props.right),
+              top: formatLength(props.top),
+              bottom: formatLength(props.bottom)
+            })
       }
     })
 
-    const formatNumber = (
-      value: number | string | undefined
-    ): string | undefined => {
-      if (typeof value === 'number') return `${value}px`
-      return value
+    const mergedShapeRef = computed(() => {
+      return floatButtonGroupInjection
+        ? floatButtonGroupInjection.shapeRef.value
+        : props.shape
+    })
+
+    const Mouseenter = (): void => {
+      if (props.menuTrigger === 'hover') {
+        doUpdateShowMenu(true)
+      }
+    }
+
+    const handleMouseleave = (): void => {
+      if (props.menuTrigger === 'hover') {
+        doUpdateShowMenu(false)
+      }
+    }
+
+    const handleClick = (e: MouseEvent): void => {
+      if (props.menuTrigger === 'click') {
+        doUpdateShowMenu(!mergedShowMenuRef.value)
+      }
     }
 
     return {
       cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
       mergedClsPrefix: mergedClsPrefixRef,
-      formatNumber
+      mergedShape: mergedShapeRef,
+      mergedShowMenu: mergedShowMenuRef,
+      Mouseenter,
+      handleMouseleave,
+      handleClick
     }
   },
 
   render () {
-    const { mergedClsPrefix, cssVars, $slots } = this
-
-    return (
+    const {
+      mergedClsPrefix,
+      cssVars,
+      mergedShape,
+      type,
+      menuTrigger,
+      mergedShowMenu,
+      $slots
+    } = this
+    const dirs: DirectiveArguments = []
+    if (menuTrigger === 'hover' && mergedShowMenu) {
+      dirs.push([mousemoveoutside, this.handleMouseleave])
+    }
+    return withDirectives(
       <div
-        class={`${mergedClsPrefix}-float-button`}
+        class={[
+          `${mergedClsPrefix}-float-button`,
+          `${mergedClsPrefix}-float-button--${mergedShape}-shape`,
+          `${mergedClsPrefix}-float-button--${type}-type`,
+          mergedShowMenu && `${mergedClsPrefix}-float-button--show-menu`
+        ]}
         style={cssVars as CSSProperties}
+        onMouseenter={this.Mouseenter}
+        onMouseleave={this.handleMouseleave}
+        onClick={this.handleClick}
       >
-        {$slots.default?.()}
-      </div>
+        <div class={`${mergedClsPrefix}-float-button__hover-background`}></div>
+        <div class={`${mergedClsPrefix}-float-button__body`}>
+          {$slots.default?.()}
+          {resolveWrappedSlot($slots.description, (children) => {
+            if (children) {
+              return (
+                <div class={`${mergedClsPrefix}-float-button__description`}>
+                  {children}
+                </div>
+              )
+            }
+            return null
+          })}
+        </div>
+        {menuTrigger ? (
+          <div class={`${mergedClsPrefix}-float-button__close`}>
+            <NBaseIcon clsPrefix={mergedClsPrefix}>
+              <CloseIcon />
+            </NBaseIcon>
+          </div>
+        ) : null}
+        {menuTrigger ? (
+          <div
+            onClick={(e) => {
+              e.stopPropagation()
+            }}
+            data-float-button-menu
+            class={`${mergedClsPrefix}-float-button__menu`}
+          >
+            {resolveSlot($slots.menu, () => [])}
+          </div>
+        ) : null}
+      </div>,
+      dirs
     )
   }
 })
diff --git a/src/float-button/src/styles/index.cssr.ts b/src/float-button/src/styles/index.cssr.ts
index 7f4d0d7ac43..baa5f9ed98a 100644
--- a/src/float-button/src/styles/index.cssr.ts
+++ b/src/float-button/src/styles/index.cssr.ts
@@ -1,4 +1,4 @@
-import { c, cB } from '../../../_utils/cssr'
+import { c, cB, cE, cM } from '../../../_utils/cssr'
 
 // vars:
 // --n-bezier
@@ -7,24 +7,106 @@ import { c, cB } from '../../../_utils/cssr'
 // --n-box-shadow-pressed
 // --n-color
 // --n-text-color
-
+// --n-color-hover
 export default cB('float-button', `
-  position: fixed;
+  user-select: none;
   cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   color: var(--n-text-color);
+  background-color: var(--n-color);
+  font-size: 18px;
   transition:
     color .3s var(--n-bezier),
+    border-color .3s var(--n-bezier),
     box-shadow .3s var(--n-bezier),
     background-color .3s var(--n-bezier);
   box-shadow: var(--n-box-shadow);
+  display: flex;
+  align-items: stretch;
+  box-sizing: border-box;
 `, [
-  c('&:hover', {
-    boxShadow: 'var(--n-box-shadow-hover)'
-  }),
-  c('&:active', {
-    boxShadow: 'var(--n-box-shadow-pressed)'
-  })
+  cM('circle-shape', `
+    border-radius: 4096px;
+  `),
+  cM('square-shape', `
+    border-radius: 4px;
+  `),
+  cE('hover-background', `
+    position: absolute;
+    inset: 0;
+    transition: background-color .3s var(--n-bezier);
+    border-radius: inherit;
+  `),
+  cE('body', `
+    position: relative;
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform .3s var(--n-bezier), opacity .3s var(--n-bezier);
+    border-radius: inherit;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding: 2px 4px;
+    gap: 2px;
+    transform: scale(1);
+  `, [
+    cE('description', `
+      font-size: 12px;
+      text-align: center;
+      line-height: 14px;
+    `)
+  ]),
+  c('&:hover', 'box-shadow: var(--n-box-shadow-hover);', [
+    c('>', [
+      cE('hover-background', `
+        background-color: var(--n-color-hover);
+      `)
+    ])
+  ]),
+  c('&:active', 'box-shadow: var(--n-box-shadow-pressed);'),
+  cM('show-menu', [
+    c('>', [
+      cE('menu', `
+        pointer-events: all;
+        bottom: 100%;
+        opacity: 1;
+      `),
+      cE('close', `
+        transform: scale(1);
+        opacity: 1;
+      `),
+      cE('body', `
+        transform: scale(0.75);
+        opacity: 0;
+      `)
+    ])
+  ]),
+  cE('close', `
+    opacity: 0;
+    transform: scale(0.75);
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform .3s var(--n-bezier), opacity .3s var(--n-bezier);
+  `),
+  cE('menu', `
+    position: absolute;
+    bottom: calc(100% - 8px);
+    display: flex;
+    flex-direction: column;
+    opacity: 0;
+    pointer-events: none;
+    transition:
+      opacity .3s var(--n-bezier),
+      bottom .3s var(--n-bezier); 
+  `, [
+    c('> *', `
+      margin-bottom: 16px;
+    `),
+    cB('float-button', `
+      position: relative !important;
+    `)
+  ])
 ])
diff --git a/src/float-button/styles/dark.ts b/src/float-button/styles/dark.ts
index 9efd2b08568..72b7b812c7d 100644
--- a/src/float-button/styles/dark.ts
+++ b/src/float-button/styles/dark.ts
@@ -5,13 +5,23 @@ const floatButtonDark: FloatButtonTheme = {
   name: 'FloatButton',
   common: commonDark,
   self (vars) {
-    const { popoverColor, textColor2 } = vars
+    const {
+      popoverColor,
+      textColor2,
+      buttonColor2Hover,
+      primaryColor,
+      primaryColorHover
+    } = vars
     return {
       color: popoverColor,
       textColor: textColor2,
       boxShadow: '0 2px 8px 0px rgba(0, 0, 0, .12)',
       boxShadowHover: '0 2px 12px 0px rgba(0, 0, 0, .18)',
-      boxShadowPressed: '0 2px 12px 0px rgba(0, 0, 0, .18)'
+      boxShadowPressed: '0 2px 12px 0px rgba(0, 0, 0, .18)',
+      colorHover: buttonColor2Hover,
+      colorPrimary: primaryColor,
+      colorPrimaryHover: primaryColorHover,
+      textColorPrimary: textColor2
     }
   }
 }
diff --git a/src/float-button/styles/light.ts b/src/float-button/styles/light.ts
index c97389dbb87..4ad398cfcd4 100644
--- a/src/float-button/styles/light.ts
+++ b/src/float-button/styles/light.ts
@@ -3,13 +3,23 @@ import type { ThemeCommonVars } from '../../_styles/common'
 import { type Theme } from '../../_mixins'
 
 const self = (vars: ThemeCommonVars) => {
-  const { popoverColor, textColor2 } = vars
+  const {
+    popoverColor,
+    textColor2,
+    buttonColor2Hover,
+    primaryColor,
+    primaryColorHover
+  } = vars
   return {
     color: popoverColor,
+    colorHover: buttonColor2Hover,
+    colorPrimary: primaryColor,
+    colorPrimaryHover: primaryColorHover,
     textColor: textColor2,
     boxShadow: '0 2px 8px 0px rgba(0, 0, 0, .12)',
     boxShadowHover: '0 2px 12px 0px rgba(0, 0, 0, .18)',
-    boxShadowPressed: '0 2px 12px 0px rgba(0, 0, 0, .18)'
+    boxShadowPressed: '0 2px 12px 0px rgba(0, 0, 0, .18)',
+    textColorPrimary: '#fff'
   }
 }
 
diff --git a/volar.d.ts b/volar.d.ts
index c2b46696fa4..fe309982783 100644
--- a/volar.d.ts
+++ b/volar.d.ts
@@ -148,6 +148,8 @@ declare module 'vue' {
     NVirtualList: (typeof import('naive-ui'))['NVirtualList']
     NWatermark: (typeof import('naive-ui'))['NWatermark']
     NModalProvider: (typeof import('naive-ui'))['NModalProvider']
+    NFloatButton: (typeof import('naive-ui'))['NFloatButton']
+    NFloatButtonGroup: (typeof import('naive-ui'))['NFloatButtonGroup']
   }
 }
 export {}