diff --git a/src/fab/__test__/__snapshots__/demo.test.jsx.snap b/src/fab/__test__/__snapshots__/demo.test.jsx.snap
index 1fd98d066..d42123e09 100644
--- a/src/fab/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/fab/__test__/__snapshots__/demo.test.jsx.snap
@@ -1,56 +1,91 @@
 // Vitest Snapshot v1
 
-exports[`Fab > Fab displayVue demo works fine 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    class="t-button t-button--size-middle t-button--base t-button--primary t-button--round t-fab t-fab--icononly"
-    role="button"
-    style="right: 16px; bottom: 32px;"
-    type="button"
+exports[`Fab > Fab advanceVue demo works fine 1`] = `
+<button
+  aria-disabled="false"
+  class="t-button t-button--size-large t-button--base t-button--primary t-button--round t-fab"
+  role="button"
+  style="right: 16px; bottom: 32px;"
+  type="button"
+>
+  <svg
+    class="t-icon t-icon-add"
+    fill="none"
+    height="1em"
+    style="font-size: 24px;"
+    viewBox="0 0 16 16"
+    width="1em"
   >
-    <!---->
-    <span
-      class="t-button__content"
-    >
-      
-      <svg
-        class="t-icon t-icon-add"
-        fill="none"
-        height="1em"
-        viewBox="0 0 16 16"
-        width="1em"
-      >
-        <path
-          d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
-          fill="currentColor"
-          fill-opacity="0.9"
-        />
-      </svg>
-      <!--v-if-->
-      
-    </span>
-    <!---->
-  </button>
-</div>
+    <path
+      d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
+      fill="currentColor"
+      fill-opacity="0.9"
+    />
+  </svg>
+  <span
+    class="t-button__content"
+  >
+    
+    按钮文字
+    
+  </span>
+  <!---->
+</button>
+`;
+
+exports[`Fab > Fab baseVue demo works fine 1`] = `
+<button
+  aria-disabled="false"
+  class="t-button t-button--size-large t-button--base t-button--primary t-button--circle t-fab"
+  role="button"
+  style="right: 16px; bottom: 32px;"
+  type="button"
+>
+  <svg
+    class="t-icon t-icon-add"
+    fill="none"
+    height="1em"
+    style="font-size: 24px;"
+    viewBox="0 0 16 16"
+    width="1em"
+  >
+    <path
+      d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
+      fill="currentColor"
+      fill-opacity="0.9"
+    />
+  </svg>
+  <span
+    class="t-button__content"
+  >
+    
+    
+    
+  </span>
+  <!---->
+</button>
 `;
 
 exports[`Fab > Fab mobileVue demo works fine 1`] = `
 <div
   class="tdesign-mobile-demo"
+  data-v-38a07a02=""
 >
   <h1
     class="title"
+    data-v-38a07a02=""
   >
     Fab 悬浮按钮
   </h1>
   <p
     class="summary"
+    data-v-38a07a02=""
   >
     当功能使用图标即可表示清楚时，可使用纯图标悬浮按钮，例如：添加、发布。
   </p>
   <div
     class="tdesign-mobile-demo-block"
+    data-v-38a07a02=""
   >
     <div
       class="tdesign-mobile-demo-block__header"
@@ -58,7 +93,7 @@ exports[`Fab > Fab mobileVue demo works fine 1`] = `
       <h2
         class="tdesign-mobile-demo-block__title"
       >
-        01 类型
+        01 组件类型
       </h2>
       <p
         class="tdesign-mobile-demo-block__summary"
@@ -67,119 +102,98 @@ exports[`Fab > Fab mobileVue demo works fine 1`] = `
       </p>
     </div>
     <div
-      class="tdesign-mobile-demo-block__slot"
+      class="tdesign-mobile-demo-block__slot with-padding"
     >
       
-      <div
-        class="toast-demo"
+      <button
+        aria-disabled="false"
+        class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+        data-v-38a07a02=""
+        role="button"
+        type="button"
       >
-        <button
-          aria-disabled="false"
-          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
-          role="button"
-          type="button"
-        >
-          <!---->
-          <span
-            class="t-button__content"
-          >
-            
-            基础使用
-            
-          </span>
-          <!---->
-        </button>
-        <button
-          aria-disabled="false"
-          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
-          role="button"
-          type="button"
+        <!---->
+        <span
+          class="t-button__content"
         >
-          <!---->
-          <span
-            class="t-button__content"
-          >
-            
-            进阶使用
-            
-          </span>
-          <!---->
-        </button>
-      </div>
+          
+          纯图标悬浮按钮
+          
+        </span>
+        <!---->
+      </button>
       
     </div>
   </div>
-  <div>
-    <button
-      aria-disabled="false"
-      class="t-button t-button--size-middle t-button--base t-button--primary t-button--round t-fab t-fab--icononly"
-      role="button"
-      style="right: 16px; bottom: 32px;"
-      type="button"
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+    data-v-38a07a02=""
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        图标加文字悬浮按钮
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot with-padding"
     >
-      <!---->
-      <span
-        class="t-button__content"
+      
+      <button
+        aria-disabled="false"
+        class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+        data-v-38a07a02=""
+        role="button"
+        type="button"
       >
-        
-        <svg
-          class="t-icon t-icon-add"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        <!---->
+        <span
+          class="t-button__content"
         >
-          <path
-            d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-        <!--v-if-->
-        
-      </span>
-      <!---->
-    </button>
+          
+          图标加文字悬浮按钮
+          
+        </span>
+        <!---->
+      </button>
+      
+    </div>
   </div>
-  <!--v-if-->
-</div>
-`;
-
-exports[`Fab > Fab textVue demo works fine 1`] = `
-<div>
   <button
     aria-disabled="false"
-    class="t-button t-button--size-middle t-button--outline t-button--primary t-button--round t-fab"
+    class="t-button t-button--size-large t-button--base t-button--primary t-button--circle t-fab"
+    data-v-38a07a02=""
     role="button"
     style="right: 16px; bottom: 32px;"
     type="button"
   >
-    <!---->
+    <svg
+      class="t-icon t-icon-add"
+      fill="none"
+      height="1em"
+      style="font-size: 24px;"
+      viewBox="0 0 16 16"
+      width="1em"
+    >
+      <path
+        d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
+        fill="currentColor"
+        fill-opacity="0.9"
+      />
+    </svg>
     <span
       class="t-button__content"
     >
       
-      <svg
-        class="t-icon t-icon-add"
-        fill="none"
-        height="1em"
-        viewBox="0 0 16 16"
-        width="1em"
-      >
-        <path
-          d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
-          fill="currentColor"
-          fill-opacity="0.9"
-        />
-      </svg>
-      <span
-        class="t-fab__text"
-      >
-        按钮文字
-      </span>
+      
       
     </span>
     <!---->
   </button>
+  <!--v-if-->
 </div>
 `;
diff --git a/src/fab/__test__/__snapshots__/index.test.jsx.snap b/src/fab/__test__/__snapshots__/index.test.jsx.snap
index 1f98d740a..16ef8c4f0 100644
--- a/src/fab/__test__/__snapshots__/index.test.jsx.snap
+++ b/src/fab/__test__/__snapshots__/index.test.jsx.snap
@@ -3,32 +3,31 @@
 exports[`fab > slots > : icon 1`] = `
 <button
   aria-disabled="false"
-  class="t-button t-button--size-middle t-button--base t-button--primary t-button--round t-fab"
+  class="t-button t-button--size-large t-button--base t-button--primary t-button--circle t-fab"
   role="button"
   style="right: 16px; bottom: 32px;"
   type="button"
 >
-  <!---->
+  
+  <svg
+    class="t-icon t-icon-app"
+    fill="none"
+    height="1em"
+    viewBox="0 0 16 16"
+    width="1em"
+  >
+    <path
+      d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
+      fill="currentColor"
+      fill-opacity="0.9"
+    />
+  </svg>
+  
   <span
     class="t-button__content"
   >
     
     
-    <svg
-      class="t-icon t-icon-app"
-      fill="none"
-      height="1em"
-      viewBox="0 0 16 16"
-      width="1em"
-    >
-      <path
-        d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
-    
-    <!--v-if-->
     
   </span>
   <!---->
diff --git a/src/fab/__test__/demo.test.jsx b/src/fab/__test__/demo.test.jsx
index 1ce7a0cbc..7d9004655 100644
--- a/src/fab/__test__/demo.test.jsx
+++ b/src/fab/__test__/demo.test.jsx
@@ -3,14 +3,14 @@
  */
 
 import { mount } from '@vue/test-utils';
-import displayVue from '@/fab/demos/display.vue';
+import advanceVue from '@/fab/demos/advance.vue';
+import baseVue from '@/fab/demos/base.vue';
 import mobileVue from '@/fab/demos/mobile.vue';
-import textVue from '@/fab/demos/text.vue';
 
 const mapper = {
-  displayVue,
+  advanceVue,
+  baseVue,
   mobileVue,
-  textVue,
 };
 
 describe('Fab', () => {
diff --git a/src/fab/__test__/index.test.jsx b/src/fab/__test__/index.test.jsx
index 4806ee474..1e425c580 100644
--- a/src/fab/__test__/index.test.jsx
+++ b/src/fab/__test__/index.test.jsx
@@ -18,7 +18,7 @@ describe('fab', () => {
       const wrapper = mount(Fab, {
         props: { text },
       });
-      const textContainer = wrapper.find('.t-fab__text');
+      const textContainer = wrapper.find('.t-button__content');
       expect(textContainer.text()).toBe(text);
     });
 
diff --git a/src/fab/demos/advance.vue b/src/fab/demos/advance.vue
new file mode 100644
index 000000000..9cb3c9dbc
--- /dev/null
+++ b/src/fab/demos/advance.vue
@@ -0,0 +1,15 @@
+<template>
+  <t-fab :icon="iconFunc" text="按钮文字" :style="customStyle" @click="onClick" />
+</template>
+
+<script lang="ts" setup>
+import { h } from 'vue';
+import { AddIcon } from 'tdesign-icons-vue-next';
+
+const iconFunc = () => h(AddIcon, { size: '24px' });
+
+const customStyle = 'right: 16px; bottom: 32px;';
+const onClick = () => {
+  console.log('click Fab');
+};
+</script>
diff --git a/src/fab/demos/display.vue b/src/fab/demos/base.vue
similarity index 58%
rename from src/fab/demos/display.vue
rename to src/fab/demos/base.vue
index f58730b3e..0ad8ee546 100644
--- a/src/fab/demos/display.vue
+++ b/src/fab/demos/base.vue
@@ -1,17 +1,13 @@
 <template>
-  <div>
-    <t-fab :icon="iconFunc" @click="onClick" />
-  </div>
+  <t-fab :icon="iconFunc" @click="onClick" />
 </template>
 
 <script lang="ts" setup>
 import { h } from 'vue';
 import { AddIcon } from 'tdesign-icons-vue-next';
 
-const iconFunc = () => h(AddIcon);
+const iconFunc = () => h(AddIcon, { size: '24px' });
 const onClick = () => {
   console.log('click Fab');
 };
 </script>
-
-<style lang="less" scoped></style>
diff --git a/src/fab/demos/mobile.vue b/src/fab/demos/mobile.vue
index 67f5b1c7c..f94549d57 100644
--- a/src/fab/demos/mobile.vue
+++ b/src/fab/demos/mobile.vue
@@ -2,24 +2,36 @@
   <div class="tdesign-mobile-demo">
     <h1 class="title">Fab 悬浮按钮</h1>
     <p class="summary">当功能使用图标即可表示清楚时，可使用纯图标悬浮按钮，例如：添加、发布。</p>
-    <tdesign-demo-block title="01 类型" summary="纯图标悬浮按钮">
-      <div class="toast-demo">
-        <t-button block size="large" variant="outline" @click="changeType('base')">基础使用</t-button>
-        <t-button block size="large" variant="outline" @click="changeType('advanced')">进阶使用</t-button>
-      </div>
+    <tdesign-demo-block title="01 组件类型" summary="纯图标悬浮按钮" :padding="true">
+      <t-button v-bind="btnProps" @click="changeType('base')">纯图标悬浮按钮</t-button>
+    </tdesign-demo-block>
+    <tdesign-demo-block summary="图标加文字悬浮按钮" :padding="true">
+      <t-button v-bind="btnProps" @click="changeType('advance')">图标加文字悬浮按钮</t-button>
     </tdesign-demo-block>
     <BaseDemo v-if="type === 'base'" />
-    <TextDemo v-if="type === 'advanced'" />
+    <AdvanceDemo v-if="type === 'advance'" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import BaseDemo from './display.vue';
-import TextDemo from './text.vue';
+import BaseDemo from './base.vue';
+import AdvanceDemo from './advance.vue';
 
 const type = ref('base');
 const changeType = (t: string) => (type.value = t);
+const btnProps = {
+  block: true,
+  size: 'large',
+  theme: 'primary',
+  variant: 'outline',
+};
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.tdesign-mobile-demo {
+  background-color: #fff;
+  min-height: 100vh;
+  box-sizing: border-box;
+}
+</style>
diff --git a/src/fab/demos/text.vue b/src/fab/demos/text.vue
deleted file mode 100644
index d04e4c87f..000000000
--- a/src/fab/demos/text.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <div>
-    <t-fab :icon="iconFunc" text="按钮文字" :button-props="baseButtonProps" :style="customStyle" @click="onClick" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { h } from 'vue';
-import { AddIcon } from 'tdesign-icons-vue-next';
-
-const iconFunc = () => h(AddIcon);
-const baseButtonProps = {
-  variant: 'outline',
-};
-const customStyle = 'right: 16px; bottom: 32px;';
-const onClick = () => {
-  console.log('click Fab');
-};
-</script>
-
-<style lang="less" scoped></style>
diff --git a/src/fab/fab.vue b/src/fab/fab.vue
index 4b457af83..934cade81 100644
--- a/src/fab/fab.vue
+++ b/src/fab/fab.vue
@@ -1,50 +1,50 @@
 <template>
-  <t-button v-bind="customButtonProps" :class="classes" :style="style" @click="onClick">
-    <t-node v-if="iconTNode" :content="iconTNode" />
-    <span v-if="text" :class="`${name}__text`">{{ text }}</span>
+  <t-button
+    size="large"
+    theme="primary"
+    :class="classes"
+    :style="style"
+    v-bind="btnProps"
+    :icon="() => iconTNode"
+    @click="onClick"
+  >
+    {{ text }}
   </t-button>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, getCurrentInstance } from 'vue';
-import { renderTNode, TNode, useEmitEvent } from '../shared';
+
+import { renderTNode, useEmitEvent } from '../shared';
 import props from './props';
 import config from '../config';
-import TButton, { TdButtonProps } from '../button';
+import TButton, { ButtonProps } from '../button';
 
 const { prefix } = config;
 const name = `${prefix}-fab`;
 
 export default defineComponent({
   name,
-  components: { TNode, TButton },
+  components: { TButton },
   props,
   emits: ['click'],
   setup(props, context) {
+    const internalInstance = getCurrentInstance();
+    const iconTNode = computed(() => renderTNode(internalInstance, 'icon'));
     const emitEvent = useEmitEvent(props, context.emit);
 
     const classes = computed(() => ({
       [`${name}`]: true,
-      [`${name}--icononly`]: props.icon && !props.text,
     }));
+    const btnProps = computed<ButtonProps>(() => ({ shape: props.text ? 'round' : 'circle', ...props.buttonProps }));
 
     const onClick = (e: MouseEvent) => emitEvent('click', { e });
 
-    const baseButtonProps = {
-      size: 'middle',
-      shape: 'round',
-      theme: 'primary',
-    };
-    const customButtonProps = computed(() => ({ ...(baseButtonProps as TdButtonProps), ...props.buttonProps }));
-
-    const internalInstance = getCurrentInstance();
-    const iconTNode = computed(() => renderTNode(internalInstance, 'icon'));
-
     return {
       name,
       classes,
+      btnProps,
       iconTNode,
-      customButtonProps,
       onClick,
     };
   },
diff --git a/src/fab/style/index.js b/src/fab/style/index.js
index 2a296b568..0773009bd 100644
--- a/src/fab/style/index.js
+++ b/src/fab/style/index.js
@@ -1 +1 @@
-import '../../_common/style/mobile/components/fab/_index.less';
+import '../../_common/style/mobile/components/fab/v2/_index.less';