diff --git a/packages/components/alert/__tests__/alert.spec.ts b/packages/components/alert/__tests__/alert.spec.ts
index 3886de8cb..0eae77c4e 100644
--- a/packages/components/alert/__tests__/alert.spec.ts
+++ b/packages/components/alert/__tests__/alert.spec.ts
@@ -93,19 +93,20 @@ describe('Alert', () => {
     await wrapper.setProps({ pagination: true })
 
     expect(wrapper.find('.ix-alert-content').text()).toBe('message1')
-    expect(wrapper.findAll('button')[0].classes()).toContain('ix-button-disabled')
-    expect(wrapper.findAll('button')[1].classes()).not.toContain('ix-button-disabled')
+    expect(wrapper.findAll('.ix-pagination-item')[0].classes()).toContain('ix-pagination-item-disabled')
+    expect(wrapper.findAll('.ix-pagination-item')[1].classes()).not.toContain('ix-pagination-item-disabled')
+    expect(wrapper.findAll('.ix-pagination-item')[2].classes()).not.toContain('ix-pagination-item-disabled')
 
     await wrapper.trigger('click')
     expect(wrapper.find('.ix-alert-content').text()).toBe('message1')
 
-    await wrapper.findAll('button')[1].trigger('click')
+    await wrapper.findAll('.ix-pagination-item')[2].trigger('click')
     expect(wrapper.find('.ix-alert-content').text()).toBe('message2')
 
-    await wrapper.findAll('button')[1].trigger('click')
+    await wrapper.findAll('.ix-pagination-item')[2].trigger('click')
     expect(wrapper.find('.ix-alert-content').text()).toBe('message2')
 
-    await wrapper.findAll('button')[0].trigger('click')
+    await wrapper.findAll('.ix-pagination-item')[0].trigger('click')
     expect(wrapper.find('.ix-alert-content').text()).toBe('message1')
 
     const onChange = vi.fn()
@@ -118,7 +119,7 @@ describe('Alert', () => {
     })
     expect(wrapper.find('.ix-alert-content').text()).toBe('message2')
 
-    await wrapper.findAll('button')[0].trigger('click')
+    await wrapper.findAll('.ix-pagination-item')[0].trigger('click')
     expect(onChange).toBeCalledWith(1)
   })
 })
diff --git a/packages/components/pagination/__tests__/__snapshots__/pagination.spec.ts.snap b/packages/components/pagination/__tests__/__snapshots__/pagination.spec.ts.snap
index c12cc486a..d8a3a384c 100644
--- a/packages/components/pagination/__tests__/__snapshots__/pagination.spec.ts.snap
+++ b/packages/components/pagination/__tests__/__snapshots__/pagination.spec.ts.snap
@@ -3,52 +3,51 @@
 exports[`Pagination > render work 1`] = `
 "<ul class=\\"ix-pagination ix-pagination-md\\">
   <li class=\\"ix-pagination-total\\">共 50 项</li>
-  <li class=\\"ix-pagination-item ix-pagination-item-button\\" title=\\"上一页\\"><button class=\\"ix-button ix-button-disabled ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" disabled=\\"\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-left\\" role=\\"img\\" aria-label=\\"left\\"></i></button></li>
-  <li class=\\"ix-pagination-item ix-pagination-item-active\\" title=\\"1\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>1</span></button></li>
-  <li class=\\"ix-pagination-item\\" title=\\"2\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>2</span></button></li>
-  <li class=\\"ix-pagination-item\\" title=\\"3\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>3</span></button></li>
-  <li class=\\"ix-pagination-item\\" title=\\"4\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>4</span></button></li>
-  <li class=\\"ix-pagination-item\\" title=\\"5\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>5</span></button></li>
-  <li class=\\"ix-pagination-item ix-pagination-item-button\\" title=\\"下一页\\"><button class=\\"ix-button ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" role=\\"img\\" aria-label=\\"right\\"></i></button></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-prev ix-pagination-item-disabled\\" tabindex=\\"-1\\" title=\\"上一页\\"><span class=\\"ix-pagination-item-content\\"><i class=\\"ix-icon ix-icon-left\\" role=\\"img\\" aria-label=\\"left\\"></i></span></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-page ix-pagination-item-active\\" tabindex=\\"0\\" title=\\"1\\"><span class=\\"ix-pagination-item-content\\">1</span></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"2\\"><span class=\\"ix-pagination-item-content\\">2</span></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"3\\"><span class=\\"ix-pagination-item-content\\">3</span></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"4\\"><span class=\\"ix-pagination-item-content\\">4</span></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"5\\"><span class=\\"ix-pagination-item-content\\">5</span></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-next\\" tabindex=\\"0\\" title=\\"下一页\\"><span class=\\"ix-pagination-item-content\\"><i class=\\"ix-icon ix-icon-right\\" role=\\"img\\" aria-label=\\"right\\"></i></span></li>
 </ul>"
 `;
 
 exports[`Pagination > render work 2`] = `
 "<ul class=\\"ix-pagination ix-pagination-simple ix-pagination-md\\">
   <li class=\\"ix-pagination-total\\">共 50 项</li>
-  <li class=\\"ix-pagination-item ix-pagination-item-button\\" title=\\"上一页\\"><button class=\\"ix-button ix-button-disabled ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" disabled=\\"\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-left\\" role=\\"img\\" aria-label=\\"left\\"></i></button></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-prev ix-pagination-item-disabled\\" tabindex=\\"-1\\" title=\\"上一页\\"><span class=\\"ix-pagination-item-content\\"><i class=\\"ix-icon ix-icon-left\\" role=\\"img\\" aria-label=\\"left\\"></i></span></li>
   <li class=\\"ix-pagination-item\\">1<span class=\\"ix-pagination-item-slash\\">/</span><span>5</span></li>
-  <li class=\\"ix-pagination-item ix-pagination-item-button\\" title=\\"下一页\\"><button class=\\"ix-button ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" role=\\"img\\" aria-label=\\"right\\"></i></button></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-next\\" tabindex=\\"0\\" title=\\"下一页\\"><span class=\\"ix-pagination-item-content\\"><i class=\\"ix-icon ix-icon-right\\" role=\\"img\\" aria-label=\\"right\\"></i></span></li>
 </ul>"
 `;
 
 exports[`Pagination > render work 3`] = `
 "<ul class=\\"ix-pagination ix-pagination-md\\">
   <li class=\\"ix-pagination-total\\">共 500 项</li>
-  <li class=\\"ix-pagination-item ix-pagination-item-button\\" title=\\"上一页\\"><button class=\\"ix-button ix-button-disabled ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" disabled=\\"\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-left\\" role=\\"img\\" aria-label=\\"left\\"></i></button></li>
-  <li class=\\"ix-pagination-item ix-pagination-item-active\\" title=\\"1\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>1</span></button></li>
-  <li class=\\"ix-pagination-item\\" title=\\"2\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>2</span></button></li>
-  <li class=\\"ix-pagination-item\\" title=\\"3\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>3</span></button></li>
-  <li class=\\"ix-pagination-item\\" title=\\"4\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>4</span></button></li>
-  <li class=\\"ix-pagination-item\\" title=\\"5\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>5</span></button></li>
-  <li class=\\"ix-pagination-item\\" title=\\"向后 5 页\\"><span class=\\"ix-pagination-item-jumper\\"><button class=\\"ix-button ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-double-right\\" role=\\"img\\" aria-label=\\"double-right\\"></i></button><button class=\\"ix-button ix-button-icon-only ix-button-text ix-button-circle ix-button-sm ix-pagination-item-ellipsis\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-ellipsis\\" role=\\"img\\" aria-label=\\"ellipsis\\"></i></button></span></li>
-  <li class=\\"ix-pagination-item\\" title=\\"50\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>50</span></button></li>
-  <li class=\\"ix-pagination-item ix-pagination-item-button\\" title=\\"下一页\\"><button class=\\"ix-button ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" role=\\"img\\" aria-label=\\"right\\"></i></button></li>
-  <li class=\\"ix-pagination-sizes\\">每页<div class=\\"ix-pagination-sizes-select-wrapper\\">
-      <div class=\\"ix-select ix-selector ix-selector-sm ix-selector-single\\">
-        <!---->
-        <div class=\\"ix-selector-content\\">
-          <div class=\\"ix-selector-item\\"><span class=\\"ix-selector-item-label\\">10</span>
-            <!---->
-          </div>
-          <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\" readonly=\\"\\">
-            <!---->
-          </div>
-          <div class=\\"ix-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"down\\"></i></div>
+  <li class=\\"ix-pagination-item ix-pagination-item-prev ix-pagination-item-disabled\\" tabindex=\\"-1\\" title=\\"上一页\\"><span class=\\"ix-pagination-item-content\\"><i class=\\"ix-icon ix-icon-left\\" role=\\"img\\" aria-label=\\"left\\"></i></span></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-page ix-pagination-item-active\\" tabindex=\\"0\\" title=\\"1\\"><span class=\\"ix-pagination-item-content\\">1</span></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"2\\"><span class=\\"ix-pagination-item-content\\">2</span></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"3\\"><span class=\\"ix-pagination-item-content\\">3</span></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"4\\"><span class=\\"ix-pagination-item-content\\">4</span></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"5\\"><span class=\\"ix-pagination-item-content\\">5</span></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-next5\\" tabindex=\\"0\\" title=\\"向后 5 页\\"><span class=\\"ix-pagination-item-content\\"><span class=\\" ix-pagination-item-jumper\\"><i class=\\"ix-icon ix-icon-double-right\\" role=\\"img\\" aria-label=\\"double-right\\"></i><i class=\\"ix-icon ix-icon-ellipsis ix-pagination-item-ellipsis\\" role=\\"img\\" aria-label=\\"ellipsis\\"></i></span></span></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"50\\"><span class=\\"ix-pagination-item-content\\">50</span></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-next\\" tabindex=\\"0\\" title=\\"下一页\\"><span class=\\"ix-pagination-item-content\\"><i class=\\"ix-icon ix-icon-right\\" role=\\"img\\" aria-label=\\"right\\"></i></span></li>
+  <li class=\\"ix-pagination-sizes\\">每页<div class=\\"ix-select ix-selector ix-selector-sm ix-selector-single\\">
+      <!---->
+      <div class=\\"ix-selector-content\\">
+        <div class=\\"ix-selector-item\\"><span class=\\"ix-selector-item-label\\">10</span>
+          <!---->
+        </div>
+        <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\" readonly=\\"\\">
+          <!---->
         </div>
+        <div class=\\"ix-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"down\\"></i></div>
       </div>
-      <!---->
-    </div>项</li>
+    </div>
+    <!---->项
+  </li>
   <li class=\\"ix-pagination-jumper\\">前往<input class=\\"ix-input ix-input-sm\\">页</li>
 </ul>"
 `;
diff --git a/packages/components/pagination/demo/Basic.vue b/packages/components/pagination/demo/Basic.vue
index 18847086b..b6b3b8ee1 100644
--- a/packages/components/pagination/demo/Basic.vue
+++ b/packages/components/pagination/demo/Basic.vue
@@ -1,9 +1,9 @@
 <template>
-  <IxPagination :total="50" />
-  <br />
-  <IxPagination :pageIndex="pageIndex" disabled :total="500" />
-  <br />
-  <IxPagination v-model:pageIndex="pageIndex" :total="500" />
+  <IxSpace vertical block>
+    <IxPagination :total="500" />
+    <IxPagination :pageIndex="pageIndex" disabled :total="500" />
+    <IxPagination v-model:pageIndex="pageIndex" :total="500" />
+  </IxSpace>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/components/pagination/demo/Size.md b/packages/components/pagination/demo/Size.md
index 246e70860..c95cba9f6 100644
--- a/packages/components/pagination/demo/Size.md
+++ b/packages/components/pagination/demo/Size.md
@@ -1,14 +1,14 @@
 ---
 title:
-  zh: 迷你版本
-  en: Small size
+  zh: 尺寸
+  en: Size
 order: 3
 ---
 
 ## zh
 
-通过设置 `size="sm"` 可以使用迷你版本。
+分页器共有 3 种尺寸：小、中、大，默认为中。
 
 ## en
 
-The mini version can be used by setting `size="sm"`.
+There are three sizes of pagination: small, medium, and large. The default is medium.
diff --git a/packages/components/pagination/demo/Size.vue b/packages/components/pagination/demo/Size.vue
index adb68dff4..00ba4318a 100644
--- a/packages/components/pagination/demo/Size.vue
+++ b/packages/components/pagination/demo/Size.vue
@@ -1,5 +1,7 @@
 <template>
-  <IxPagination :total="500" size="sm" />
-  <br />
-  <IxPagination :total="500" size="sm" showQuickJumper showSizeChanger />
+  <IxSpace vertical block>
+    <IxPagination :total="500" size="sm" showQuickJumper showSizeChanger />
+    <IxPagination :total="500" size="md" showQuickJumper showSizeChanger />
+    <IxPagination :total="500" size="lg" showQuickJumper showSizeChanger />
+  </IxSpace>
 </template>
diff --git a/packages/components/pagination/demo/SizeChanger.vue b/packages/components/pagination/demo/SizeChanger.vue
index e4fe43bdb..a7e956fb8 100644
--- a/packages/components/pagination/demo/SizeChanger.vue
+++ b/packages/components/pagination/demo/SizeChanger.vue
@@ -1,7 +1,9 @@
 <template>
-  <IxPagination showSizeChanger :total="500" />
-  <br />
-  <IxPagination v-model:pageSize="pageSize" :pageSizes="[10, 20, 30, 40]" showSizeChanger :total="500" />
+  <IxSpace vertical block>
+    <IxPagination showSizeChanger :total="500" />
+
+    <IxPagination v-model:pageSize="pageSize" :pageSizes="[10, 20, 30, 40]" showSizeChanger :total="500" />
+  </IxSpace>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/components/pagination/demo/Total.vue b/packages/components/pagination/demo/Total.vue
index 94cf09eea..3c6dd93f8 100644
--- a/packages/components/pagination/demo/Total.vue
+++ b/packages/components/pagination/demo/Total.vue
@@ -1,9 +1,10 @@
 <template>
-  <IxPagination :total="500" :showTotal="false" />
-  <br />
-  <IxPagination :total="500">
-    <template #total="{ total, range, prefix, suffix }">
-      <span> {{ range[0] }}-{{ range[1] }} {{ prefix }} {{ total }} {{ suffix }}</span>
-    </template>
-  </IxPagination>
+  <IxSpace vertical block>
+    <IxPagination :total="500" :showTotal="false" />
+    <IxPagination :total="500">
+      <template #total="{ total, range, prefix, suffix }">
+        <span> {{ range[0] }}-{{ range[1] }} {{ prefix }} {{ total }} {{ suffix }}</span>
+      </template>
+    </IxPagination>
+  </IxSpace>
 </template>
diff --git a/packages/components/pagination/docs/Index.zh.md b/packages/components/pagination/docs/Index.zh.md
index 89a3c7776..fcb2a96d6 100644
--- a/packages/components/pagination/docs/Index.zh.md
+++ b/packages/components/pagination/docs/Index.zh.md
@@ -4,5 +4,6 @@ type: 导航
 order: 0
 title: Pagination
 subtitle: 分页
+theme: true
 ---
 
diff --git a/packages/components/pagination/docs/Theme.zh.md b/packages/components/pagination/docs/Theme.zh.md
index 8b7f3e67e..9ac88dca4 100644
--- a/packages/components/pagination/docs/Theme.zh.md
+++ b/packages/components/pagination/docs/Theme.zh.md
@@ -1,24 +1,20 @@
 | 名称 | default | seer | 备注 |
 | --- | --- | --- | --- |
-| `@pagination-font-size-md` | `@font-size-md` | `@font-size-sm` | - |
-| `@pagination-font-size-sm` | `@font-size-sm` | - | - |
-| `@pagination-item-icon-font-size` | `@font-size-sm` | - | - |
-| `@pagination-item-size-md` | `32px` | - | - |
-| `@pagination-item-size-sm` | `24px` | - | - |
-| `@pagination-item-padding-md` | `4px` | - | - |
+| `@pagination-font-size-sm` | `var(--ix-font-size-sm)` | `var(--ix-font-size-sm)` | - |
+| `@pagination-font-size-md` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - |
+| `@pagination-font-size-lg` | `var(--ix-font-size-lg)` | `var(--ix-font-size-md)` | - |
 | `@pagination-item-padding-sm` | `0` | - | - |
-| `@pagination-item-input-width-md` | `48px` | - | - |
-| `@pagination-item-input-width-sm` | `40px` | - | - |
-| `@pagination-item-active-color` | `@color-white` | `@color-primary` | - |
-| `@pagination-item-active-background-color` | `@color-primary` | `@color-primary-l50` | - |
-| `@pagination-item-color` | `@color-graphite-d40` | - | - |
-| `@pagination-item-background-color` | `tint(@color-primary, 90%)` | - | - |
-| `@pagination-item-hover-color` | `@color-graphite-d40` | - | - |
-| `@pagination-item-hover-background-color` | `tint(@color-primary, 90%)` | `@color-graphite-l50` | - |
-| `@pagination-item-disabled-color` | `@text-color-disabled` | - | - |
-| `@pagination-item-disabled-background-color` | `@background-color-disabled` | - | - |
-| `@pagination-item-button-hover-color` | `@color-graphite-d20` | - | - |
-| `@pagination-item-button-active-color` | `@color-graphite-d20` | - | - |
-| `@pagination-item-button-hover-background-color` | `@color-graphite-l50` | - | - |
-| `@pagination-total-color` | `@color-graphite-d10` | - | - |
-| `@pagination-sizes-color` | `@color-graphite-d10` | - | - |
+| `@pagination-item-padding-md` | `var(--ix-spacing-xs)` | - | - |
+| `@pagination-item-padding-lg` | `var(--ix-spacing-xs)` | - | - |
+| `@pagination-item-content-size-sm` | `24px` | - | - |
+| `@pagination-item-content-size-md` | `24px` | - | - |
+| `@pagination-item-content-size-lg` | `32px` | - | - |
+| `@pagination-item-content-border-radius` | `50%` | - | - |
+| `@pagination-item-content-icon-font-size` | `inherit` | `var(--ix-font-size-lg)` | - |
+| `@pagination-color-hover` | `var(--ix-text-color)` | `var(--ix-color-primary)` | - |
+| `@pagination-color-active` | `var(--ix-text-color-inverse)` | `var(--ix-color-primary)` | - |
+| `@pagination-color-disabled` | `var(--ix-text-color-disabled)` | `var(--ix-text-color-disabled)` | - |
+| `@pagination-background-color-hover` | `var(--ix-background-color-deep)` | `var(--ix-background-color-light)` | - |
+| `@pagination-background-color-active` | `var(--ix-color-primary)` | `var(--ix-color-primary-l50)` | - |
+| `@pagination-background-color-disabled` | `var(--ix-background-color-deep)` | `var(--ix-background-color-deep)` | - |
+| `@pagination-outline-color` | `var(--ix-color-primary-l10)` | - | - |
diff --git a/packages/components/pagination/src/Pagination.tsx b/packages/components/pagination/src/Pagination.tsx
index f503d71ca..c8469e92c 100644
--- a/packages/components/pagination/src/Pagination.tsx
+++ b/packages/components/pagination/src/Pagination.tsx
@@ -31,7 +31,7 @@ export default defineComponent({
 
     const showTotal = computed(() => props.showTotal ?? config.showTotal)
     const simple = computed(() => props.simple ?? config.simple)
-    const size = computed(() => props.size ?? config.size)
+    const mergedSize = computed(() => props.size ?? config.size)
     const showQuickJumper = computed(() => props.showQuickJumper ?? config.showQuickJumper)
     const showSizeChanger = computed(() => props.showSizeChanger ?? config.showSizeChanger)
 
@@ -45,6 +45,7 @@ export default defineComponent({
       config,
       locale,
       mergedPrefixCls,
+      mergedSize,
       activeIndex,
       activeSize,
       lastIndex,
@@ -59,7 +60,7 @@ export default defineComponent({
         [prefixCls]: true,
         [`${prefixCls}-disabled`]: props.disabled,
         [`${prefixCls}-simple`]: simple.value,
-        [`${prefixCls}-${size.value}`]: true,
+        [`${prefixCls}-${mergedSize.value}`]: true,
       })
     })
 
@@ -75,7 +76,12 @@ export default defineComponent({
         children.push(
           <li class={`${prefixCls}-item`}>
             {showQuickJumper.value ? (
-              <ɵInput disabled={props.disabled} size="sm" value={_activeIndex.toString()} onKeydown={jumpToIndex} />
+              <ɵInput
+                disabled={props.disabled}
+                size={mergedSize.value === 'lg' ? 'md' : 'sm'}
+                value={_activeIndex.toString()}
+                onKeydown={jumpToIndex}
+              />
             ) : (
               _activeIndex
             )}
diff --git a/packages/components/pagination/src/contents/Item.tsx b/packages/components/pagination/src/contents/Item.tsx
index 48ae11fcc..002ec9a3d 100644
--- a/packages/components/pagination/src/contents/Item.tsx
+++ b/packages/components/pagination/src/contents/Item.tsx
@@ -5,13 +5,11 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { VNodeTypes } from 'vue'
-
-import { computed, defineComponent, inject } from 'vue'
+import { type VNodeChild, computed, createTextVNode, defineComponent, inject } from 'vue'
 
 import { isNil } from 'lodash-es'
 
-import { IxButton } from '@idux/components/button'
+import { IxIcon } from '@idux/components/icon'
 
 import { paginationToken } from '../token'
 import { paginationItemProps } from '../types'
@@ -31,11 +29,6 @@ const indexDiffMap = {
   next5: 5,
 } as const
 
-const buttonSizeTransformMap = {
-  md: 'sm',
-  sm: 'xs',
-} as const
-
 export default defineComponent({
   props: paginationItemProps,
   setup(props) {
@@ -55,11 +48,11 @@ export default defineComponent({
 
     const classes = computed(() => {
       const prefixCls = `${mergedPrefixCls.value}-item`
-      const { type } = props
       return {
         [prefixCls]: true,
+        [`${prefixCls}-${props.type}`]: true,
         [`${prefixCls}-active`]: isActive.value,
-        [`${prefixCls}-button`]: type === 'next' || type === 'prev',
+        [`${prefixCls}-disabled`]: isDisabled.value,
       }
     })
 
@@ -70,13 +63,13 @@ export default defineComponent({
 
       const { type, index } = props
       if (type === 'page') {
-        return index!.toString()
+        return index as unknown as string
       }
 
       return locale.pagination[type]
     })
 
-    const onClick = () => {
+    const handleClick = () => {
       if (isDisabled.value) {
         return
       }
@@ -90,41 +83,44 @@ export default defineComponent({
       changePageIndex(newIndex)
     }
 
+    const handleKeydown = (evt: KeyboardEvent) => {
+      if (isDisabled.value || evt.code !== 'Enter') {
+        return
+      }
+      handleClick()
+    }
+
     return () => {
       const prefixCls = `${mergedPrefixCls.value}-item`
-
       const { index, type } = props
       const disabled = isDisabled.value
-      const active = isActive.value
-      let original: VNodeTypes
-      const icon = iconMap[type]
-      const commonButtonProps = {
-        mode: 'text',
-        size: buttonSizeTransformMap[paginationProps.size ?? config.size],
-        shape: 'circle',
-      } as const
+
+      let original: VNodeChild
+
       if (props.type === 'prev5' || type === 'next5') {
         original = (
-          <span class={`${prefixCls}-jumper`}>
-            <IxButton {...commonButtonProps} icon={icon} disabled={disabled} />
-            <IxButton {...commonButtonProps} class={`${prefixCls}-ellipsis`} icon="ellipsis" disabled={disabled} />
+          <span class={` ${prefixCls}-jumper`}>
+            <IxIcon name={iconMap[type]} />
+            <IxIcon class={`${prefixCls}-ellipsis`} name="ellipsis" />
           </span>
         )
       } else if (!isNil(index)) {
-        original = (
-          <IxButton {...commonButtonProps} icon={icon} disabled={disabled}>
-            {index}
-          </IxButton>
-        )
+        original = createTextVNode(index as unknown as string)
       } else {
-        original = <IxButton {...commonButtonProps} icon={icon} disabled={disabled}></IxButton>
+        original = <IxIcon name={iconMap[type]} />
       }
 
-      const children = slots.item ? slots.item({ index, type, active, disabled, original }) : original
+      const children = slots.item ? slots.item({ index, type, active: isActive.value, disabled, original }) : original
 
       return (
-        <li class={classes.value} title={title.value} onClick={onClick}>
-          {children}
+        <li
+          class={classes.value}
+          tabindex={disabled ? -1 : 0}
+          title={title.value}
+          onClick={handleClick}
+          onKeydown={handleKeydown}
+        >
+          <span class={`${prefixCls}-content`}>{children}</span>
         </li>
       )
     }
diff --git a/packages/components/pagination/src/contents/Jumper.tsx b/packages/components/pagination/src/contents/Jumper.tsx
index 814b9280e..5090c9099 100644
--- a/packages/components/pagination/src/contents/Jumper.tsx
+++ b/packages/components/pagination/src/contents/Jumper.tsx
@@ -13,7 +13,7 @@ import { paginationToken } from '../token'
 
 export default defineComponent({
   setup() {
-    const { props, locale, mergedPrefixCls, jumpToIndex } = inject(paginationToken)!
+    const { props, locale, mergedPrefixCls, mergedSize, jumpToIndex } = inject(paginationToken)!
 
     return () => {
       const prefixCls = `${mergedPrefixCls.value}-jumper`
@@ -22,7 +22,7 @@ export default defineComponent({
       return (
         <li class={prefixCls}>
           {jumpTo}
-          <ɵInput disabled={disabled} size="sm" onKeydown={jumpToIndex} />
+          <ɵInput disabled={disabled} size={mergedSize.value === 'lg' ? 'md' : 'sm'} onKeydown={jumpToIndex} />
           {page}
         </li>
       )
diff --git a/packages/components/pagination/src/contents/Sizes.tsx b/packages/components/pagination/src/contents/Sizes.tsx
index 5b82d5ee9..6fc2c2bf7 100644
--- a/packages/components/pagination/src/contents/Sizes.tsx
+++ b/packages/components/pagination/src/contents/Sizes.tsx
@@ -13,7 +13,7 @@ import { paginationToken } from '../token'
 
 export default defineComponent({
   setup() {
-    const { props, config, locale, mergedPrefixCls, activeSize, changePageSize } = inject(paginationToken)!
+    const { props, config, locale, mergedPrefixCls, mergedSize, activeSize, changePageSize } = inject(paginationToken)!
 
     const sizeData = computed(() => {
       const { pageSizes = config.pageSizes } = props
@@ -29,15 +29,13 @@ export default defineComponent({
       return (
         <li class={prefixCls}>
           {itemsPerPage}
-          <div class={`${prefixCls}-select-wrapper`}>
-            <IxSelect
-              disabled={props.disabled}
-              dataSource={sizeData.value}
-              size="sm"
-              value={activeSize.value}
-              onChange={changePageSize}
-            />
-          </div>
+          <IxSelect
+            disabled={props.disabled}
+            dataSource={sizeData.value}
+            size={mergedSize.value === 'lg' ? 'md' : 'sm'}
+            value={activeSize.value}
+            onChange={changePageSize}
+          />
           {itemsSuffix}
         </li>
       )
diff --git a/packages/components/pagination/src/token.ts b/packages/components/pagination/src/token.ts
index 1e86d160d..85db3c187 100644
--- a/packages/components/pagination/src/token.ts
+++ b/packages/components/pagination/src/token.ts
@@ -6,7 +6,7 @@
  */
 
 import type { PagesContext } from './composables/usePages'
-import type { PaginationProps } from './types'
+import type { PaginationProps, PaginationSize } from './types'
 import type { PaginationConfig } from '@idux/components/config'
 import type { Locale } from '@idux/components/locales'
 import type { ComputedRef, InjectionKey, Slots } from 'vue'
@@ -17,6 +17,7 @@ export interface PaginationContext extends PagesContext {
   config: PaginationConfig
   locale: Locale
   mergedPrefixCls: ComputedRef<string>
+  mergedSize: ComputedRef<PaginationSize>
   jumpToIndex: (event: KeyboardEvent) => void
 }
 
diff --git a/packages/components/pagination/src/types.ts b/packages/components/pagination/src/types.ts
index baaabc99c..8b3b6a919 100644
--- a/packages/components/pagination/src/types.ts
+++ b/packages/components/pagination/src/types.ts
@@ -8,7 +8,7 @@
 import type { ExtractInnerPropTypes, ExtractPublicPropTypes, MaybeArray } from '@idux/cdk/utils'
 import type { DefineComponent, HTMLAttributes, PropType, VNode } from 'vue'
 
-export type PaginationSize = 'sm' | 'md'
+export type PaginationSize = 'sm' | 'md' | 'lg'
 export type PaginationItemType = 'page' | 'prev' | 'next' | 'prev5' | 'next5'
 export interface PaginationItemRenderOptions {
   index?: number
diff --git a/packages/components/pagination/style/index.less b/packages/components/pagination/style/index.less
index 62f000dda..4078dac1e 100644
--- a/packages/components/pagination/style/index.less
+++ b/packages/components/pagination/style/index.less
@@ -2,13 +2,56 @@
 @import './mixin.less';
 
 .@{pagination-prefix} {
-  .reset-component();
+  .reset-component-new();
 
   display: flex;
   align-items: center;
+  list-style: none;
+  outline: none;
+  user-select: none;
+
+  &-sm {
+    .pagination-size(@pagination-font-size-sm,  @pagination-item-padding-sm, @pagination-item-content-size-sm);
+  }
+
+  &-md {
+    .pagination-size(@pagination-font-size-md,  @pagination-item-padding-md, @pagination-item-content-size-md);
+  }
+
+  &-lg {
+    .pagination-size(@pagination-font-size-lg,  @pagination-item-padding-lg, @pagination-item-content-size-lg);
+  }
+
+  &-sm,
+  &-md {
+    .@{pagination-prefix}-sizes > .@{select-prefix} {
+      width: 60px;
+    }
+
+    .@{pagination-prefix}-item,
+    .@{pagination-prefix}-jumper {
+      > .@{input-prefix} {
+        width: 40px;
+      }
+    }
+  }
+
+  &-lg {
+    .@{pagination-prefix}-sizes > .@{select-prefix} {
+      width: 64px;
+    }
+
+    .@{pagination-prefix}-item,
+    .@{pagination-prefix}-jumper {
+      > .@{input-prefix} {
+        width: 48px;
+      }
+    }
+  }
 
   &-item,
   &-total,
+  &-sizes,
   &-jumper {
     display: inline-block;
   }
@@ -22,27 +65,26 @@
     margin-left: 8px;
   }
 
-  &-sizes {
-    display: inline-flex;
-
-    &-select-wrapper {
-      flex: auto;
-      margin: 0 4px;
-      min-width: 64px;
-    }
-  }
-
-  &-item,
-  &-jumper {
-    .@{idux-prefix}-input {
-      margin: 0 4px;
-      width: 40px;
-    }
+  &-sizes > .@{select-prefix},
+  &-item > .@{input-prefix},
+  &-jumper > .@{input-prefix} {
+    margin: 0 4px;
   }
 
   &-item {
-    .@{button-prefix} {
-      transition: none;
+    cursor: pointer;
+    transition: color var(--ix-transition-duration-fast);
+
+    &-content {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: @pagination-item-content-border-radius;
+
+      > .@{icon-prefix},
+      &-jumper > .@{icon-prefix} {
+        font-size: @pagination-item-content-icon-font-size;
+      }
     }
 
     &-slash {
@@ -50,71 +92,61 @@
     }
 
     &-jumper {
-      .@{button-prefix} {
+      > .@{icon-prefix} {
         display: none;
       }
 
-      .@{pagination-prefix}-item-ellipsis {
+      > .@{pagination-prefix}-item-ellipsis {
         display: inline-block;
       }
 
       &:hover {
-        .@{button-prefix} {
+        > .@{icon-prefix} {
           display: inline-block;
         }
 
-        .@{pagination-prefix}-item-ellipsis {
+        > .@{pagination-prefix}-item-ellipsis {
           display: none;
         }
       }
     }
 
-    &-active {
-      .@{button-prefix} {
-        color: @pagination-item-active-color;
-        background-color: @pagination-item-active-background-color;
+    &:hover {
+      color: @pagination-color-hover;
+      .@{pagination-prefix}-item-content {
+        background-color: @pagination-background-color-hover;
       }
+    }
 
-      .@{button-prefix}.@{button-prefix}-disabled {
-        color: @pagination-item-disabled-color;
-        background-color: @pagination-item-disabled-background-color;
+    &&-active {
+      color: @pagination-color-active;
+      .@{pagination-prefix}-item-content {
+        background-color: @pagination-background-color-active;
       }
     }
 
-    &-button {
-      .@{button-prefix}:not(.@{button-prefix}-disabled) {
-        &:hover {
-          color: @pagination-item-button-hover-color;
-          background-color: @pagination-item-button-hover-background-color;
-        }
-        &:focus {
-          color: @pagination-item-button-active-color;
-        }
+    &&-disabled {
+      cursor: not-allowed;
+      color: @pagination-color-disabled;
+      .@{pagination-prefix}-item-content {
+        background-color: var(--ix-background-color);
       }
     }
-  }
 
-  &-item:not(&-item-active):not(&-item-button) {
-    .@{button-prefix}:hover:not(.@{button-prefix}-disabled) {
-      color: @pagination-item-color;
-      background-color: @pagination-item-hover-background-color;
+    &&-active&-disabled &-content {
+      background-color: @pagination-background-color-disabled;
     }
-  }
-
-  &-total {
-    color: @pagination-total-color;
-  }
-
-  &-sizes,
-  &-jumper {
-    color: @pagination-sizes-color;
-  }
 
-  &-md {
-    .pagination-size(@pagination-font-size-md, @pagination-item-size-md, @pagination-item-padding-md);
+    &:focus-visible {
+      outline: none;
+      .@{pagination-prefix}-item-content {
+        outline: 2px solid @pagination-outline-color;
+        outline-offset: 1px;
+      }
+    }
   }
 
-  &-sm {
-    .pagination-size(@pagination-font-size-sm, @pagination-item-size-sm, @pagination-item-padding-sm);
+  &&-disabled {
+    color: @pagination-color-disabled;
   }
 }
diff --git a/packages/components/pagination/style/mixin.less b/packages/components/pagination/style/mixin.less
index de02f7704..af6eb6a72 100644
--- a/packages/components/pagination/style/mixin.less
+++ b/packages/components/pagination/style/mixin.less
@@ -1,34 +1,14 @@
-.pagination-size(@font-size, @item-size, @item-padding) {
+.pagination-size(@font-size, @item-padding, @item-button-size) {
   font-size: @font-size;
-  @item-button-size: @item-size - @item-padding * 2;
+  line-height: calc(@font-size + 8px);
 
   .@{pagination-prefix}-item {
     padding: @item-padding;
 
-    .@{button-prefix} {
-      min-width: @item-button-size;
+    &-content {
       height: @item-button-size;
       line-height: @item-button-size;
-      font-size: @font-size;
-    }
-
-    .@{button-prefix}.@{button-prefix}-icon-only {
-      width: @item-button-size;
+      min-width: @item-button-size;
     }
   }
-
-  .@{pagination-prefix}-total,
-  .@{pagination-prefix}-sizes,
-  .@{pagination-prefix}-jumper {
-    height: @item-size;
-    line-height: @item-size;
-  }
-
-  .@{pagination-prefix}-sizes .@{select-prefix},
-  .@{pagination-prefix}-jumper .@{input-prefix},
-  .@{pagination-prefix}-total {
-    font-size: @font-size;
-    height: @item-size;
-    line-height: @item-size;
-  }
 }
diff --git a/packages/components/pagination/style/themes/default.less b/packages/components/pagination/style/themes/default.less
index 79b332ba1..a66443560 100644
--- a/packages/components/pagination/style/themes/default.less
+++ b/packages/components/pagination/style/themes/default.less
@@ -1,5 +1,4 @@
 @import '../../../style/themes/default.less';
-@import '../../../button/style/themes/default.variable.less';
 @import './default.variable.less';
 
 @import '../index.less';
diff --git a/packages/components/pagination/style/themes/default.ts b/packages/components/pagination/style/themes/default.ts
index fb423bd31..1700b340d 100644
--- a/packages/components/pagination/style/themes/default.ts
+++ b/packages/components/pagination/style/themes/default.ts
@@ -1,6 +1,6 @@
 // style dependencies
 
-import '@idux/components/button/style/themes/default'
+import '@idux/components/icon/style/themes/default'
 import '@idux/components/input/style/themes/default'
 import '@idux/components/select/style/themes/default'
 
diff --git a/packages/components/pagination/style/themes/default.variable.less b/packages/components/pagination/style/themes/default.variable.less
index bb3bba97f..52ca8238a 100644
--- a/packages/components/pagination/style/themes/default.variable.less
+++ b/packages/components/pagination/style/themes/default.variable.less
@@ -1,25 +1,22 @@
-@pagination-font-size-md: @font-size-md;
-@pagination-font-size-sm: @font-size-sm;
-@pagination-item-icon-font-size: @font-size-sm;
+@pagination-font-size-sm: var(--ix-font-size-sm);
+@pagination-font-size-md: var(--ix-font-size-md);
+@pagination-font-size-lg: var(--ix-font-size-lg);
 
-@pagination-item-size-md: 32px;
-@pagination-item-size-sm: 24px;
-@pagination-item-padding-md: 4px;
 @pagination-item-padding-sm: 0;
+@pagination-item-padding-md: var(--ix-spacing-xs);
+@pagination-item-padding-lg: var(--ix-spacing-xs);
 
-@pagination-item-input-width-md: 48px;
-@pagination-item-input-width-sm: 40px;
+@pagination-item-content-size-sm: 24px;
+@pagination-item-content-size-md: 24px;
+@pagination-item-content-size-lg: 32px;
 
-@pagination-item-active-color: @color-white;
-@pagination-item-active-background-color: @color-primary;
-@pagination-item-color: @color-graphite-d40;
-@pagination-item-background-color: tint(@color-primary, 90%);
-@pagination-item-hover-color: @color-graphite-d40;
-@pagination-item-hover-background-color: tint(@color-primary, 90%);
-@pagination-item-disabled-color: @text-color-disabled;
-@pagination-item-disabled-background-color: @background-color-disabled;
-@pagination-item-button-hover-color: @color-graphite-d20;
-@pagination-item-button-active-color: @color-graphite-d20;
-@pagination-item-button-hover-background-color: @color-graphite-l50;
-@pagination-total-color: @color-graphite-d10;
-@pagination-sizes-color: @color-graphite-d10;
+@pagination-item-content-border-radius: 50%;
+@pagination-item-content-icon-font-size: inherit;
+
+@pagination-color-hover: var(--ix-text-color);
+@pagination-color-active: var(--ix-text-color-inverse);
+@pagination-color-disabled: var(--ix-text-color-disabled);
+@pagination-background-color-hover: var(--ix-background-color-deep);
+@pagination-background-color-active: var(--ix-color-primary);
+@pagination-background-color-disabled: var(--ix-background-color-deep);
+@pagination-outline-color: var(--ix-color-primary-l10);
diff --git a/packages/components/pagination/style/themes/seer.less b/packages/components/pagination/style/themes/seer.less
index 65becd516..32bf707c1 100644
--- a/packages/components/pagination/style/themes/seer.less
+++ b/packages/components/pagination/style/themes/seer.less
@@ -1,5 +1,4 @@
 @import '../../../style/themes/seer.less';
-@import '../../../button/style/themes/seer.variable.less';
 @import './seer.variable.less';
 
 @import '../index.less';
diff --git a/packages/components/pagination/style/themes/seer.ts b/packages/components/pagination/style/themes/seer.ts
index 149cc9ac8..9c8a3c300 100644
--- a/packages/components/pagination/style/themes/seer.ts
+++ b/packages/components/pagination/style/themes/seer.ts
@@ -1,6 +1,6 @@
 // style dependencies
 
-import '@idux/components/button/style/themes/seer'
+import '@idux/components/icon/style/themes/seer'
 import '@idux/components/input/style/themes/seer'
 import '@idux/components/select/style/themes/seer'
 
diff --git a/packages/components/pagination/style/themes/seer.variable.less b/packages/components/pagination/style/themes/seer.variable.less
index e598276d0..6ab10c885 100644
--- a/packages/components/pagination/style/themes/seer.variable.less
+++ b/packages/components/pagination/style/themes/seer.variable.less
@@ -1,7 +1,12 @@
 @import './default.variable.less';
 
-@pagination-font-size-md: @font-size-sm;
-@pagination-item-active-color: @color-primary;
-@pagination-item-active-background-color: @color-primary-l50;
+@pagination-font-size-md: var(--ix-font-size-sm);
+@pagination-font-size-lg: var(--ix-font-size-md);
 
-@pagination-item-hover-background-color: @color-graphite-l50;
+@pagination-item-content-icon-font-size: var(--ix-font-size-lg);
+
+@pagination-color-hover: var(--ix-color-primary);
+@pagination-color-active: var(--ix-color-primary);
+@pagination-background-color-hover: var(--ix-background-color-light);
+@pagination-background-color-active: var(--ix-color-primary-l50);
+@pagination-background-color-disabled: var(--ix-background-color-deep);
diff --git a/packages/components/stepper/__tests__/__snapshots__/steps.spec.ts.snap b/packages/components/stepper/__tests__/__snapshots__/steps.spec.ts.snap
index 266907546..0c1baf3df 100644
--- a/packages/components/stepper/__tests__/__snapshots__/steps.spec.ts.snap
+++ b/packages/components/stepper/__tests__/__snapshots__/steps.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`Stepper > percent work 1`] = `
 "<div class=\\"ix-stepper ix-stepper-label-end ix-stepper-md ix-stepper-with-percent\\">
   <div class=\\"ix-stepper-item ix-stepper-item-finish\\">
     <div class=\\"ix-stepper-item-tail\\"></div>
-    <div class=\\"ix-stepper-item-icon\\"><i class=\\"ix-icon ix-icon-check\\" role=\\"img\\" aria-label=\\"check\\"></i></div>
+    <div class=\\"ix-stepper-item-icon\\"><i class=\\"ix-icon ix-icon-success\\" role=\\"img\\" aria-label=\\"success\\"></i></div>
     <div class=\\"ix-stepper-item-content\\">
       <div class=\\"ix-stepper-item-title\\">Finished</div>
       <div class=\\"ix-stepper-item-description\\">This is a description.</div>
@@ -47,7 +47,7 @@ exports[`Stepper > percent work 2`] = `
 "<div class=\\"ix-stepper ix-stepper-label-end ix-stepper-md ix-stepper-with-percent\\">
   <div class=\\"ix-stepper-item ix-stepper-item-finish\\">
     <div class=\\"ix-stepper-item-tail\\"></div>
-    <div class=\\"ix-stepper-item-icon\\"><i class=\\"ix-icon ix-icon-check\\" role=\\"img\\" aria-label=\\"check\\"></i></div>
+    <div class=\\"ix-stepper-item-icon\\"><i class=\\"ix-icon ix-icon-success\\" role=\\"img\\" aria-label=\\"success\\"></i></div>
     <div class=\\"ix-stepper-item-content\\">
       <div class=\\"ix-stepper-item-title\\">Finished</div>
       <div class=\\"ix-stepper-item-description\\">This is a description.</div>
@@ -90,8 +90,8 @@ exports[`Stepper > percent work 3`] = `
 "<div class=\\"ix-stepper ix-stepper-label-end ix-stepper-md ix-stepper-with-percent\\">
   <div class=\\"ix-stepper-item ix-stepper-item-finish\\">
     <div class=\\"ix-stepper-item-tail\\"></div>
-    <div class=\\"ix-stepper-item-icon\\"><i class=\\"ix-icon ix-icon-check\\" role=\\"img\\" aria-label=\\"check\\"><svg viewBox=\\"0 0 1024 1024\\" focusable=\\"false\\" aria-hidden=\\"true\\" data-icon=\\"check\\">
-          <path d=\\"M158.912 440.768a12.8 12.8 0 0 1 18.112 0l262.4 262.464 443.52-443.52a12.8 12.8 0 0 1 18.112 0l27.2 27.2a12.8 12.8 0 0 1 0 18.112L448.512 784.64a12.8 12.8 0 0 1-18.112 0L131.84 486.016a12.8 12.8 0 0 1 0-18.112l27.136-27.136z\\"></path>
+    <div class=\\"ix-stepper-item-icon\\"><i class=\\"ix-icon ix-icon-success\\" role=\\"img\\" aria-label=\\"success\\"><svg viewBox=\\"0 0 1024 1024\\" focusable=\\"false\\" aria-hidden=\\"true\\" data-icon=\\"success\\">
+          <path d=\\"M264.384 443.52a25.6 25.6 0 0 1 36.224 0L463.552 606.4 762.24 307.712a25.6 25.6 0 0 1 36.16 0l54.336 54.272a25.6 25.6 0 0 1 0 36.224L481.6 769.28a25.6 25.6 0 0 1-36.16 0L210.112 534.016a25.6 25.6 0 0 1 0-36.224l54.272-54.336z\\"></path>
         </svg></i></div>
     <div class=\\"ix-stepper-item-content\\">
       <div class=\\"ix-stepper-item-title\\">Finished</div>
@@ -135,7 +135,7 @@ exports[`Stepper > render work 1`] = `
 "<div class=\\"ix-stepper ix-stepper-label-end ix-stepper-md\\">
   <div class=\\"ix-stepper-item ix-stepper-item-finish\\">
     <div class=\\"ix-stepper-item-tail\\"></div>
-    <div class=\\"ix-stepper-item-icon\\"><i class=\\"ix-icon ix-icon-check\\" role=\\"img\\" aria-label=\\"check\\"></i></div>
+    <div class=\\"ix-stepper-item-icon\\"><i class=\\"ix-icon ix-icon-success\\" role=\\"img\\" aria-label=\\"success\\"></i></div>
     <div class=\\"ix-stepper-item-content\\">
       <div class=\\"ix-stepper-item-title\\">Finished</div>
       <div class=\\"ix-stepper-item-description\\">This is a description.</div>
diff --git a/packages/components/style/themes/default.less b/packages/components/style/themes/default.less
index 7784acd4f..4c59efeeb 100644
--- a/packages/components/style/themes/default.less
+++ b/packages/components/style/themes/default.less
@@ -55,6 +55,8 @@
   --ix-height-md: 32px;
   --ix-height-lg: 40px;
   --ix-height-xl: 48px;
+  --ix-height-2xl: 56px;
+  --ix-height-3xl: 64px;
 
   // Line-Height
   --ix-line-height-gutter: 8px;
diff --git a/packages/components/table/__tests__/__snapshots__/table.spec.ts.snap b/packages/components/table/__tests__/__snapshots__/table.spec.ts.snap
index 7c4b4bf3d..69668cd71 100644
--- a/packages/components/table/__tests__/__snapshots__/table.spec.ts.snap
+++ b/packages/components/table/__tests__/__snapshots__/table.spec.ts.snap
@@ -318,15 +318,15 @@ exports[`Table > basic work > render work 1`] = `
   <!---->
   <ul class=\\"ix-pagination ix-pagination-md ix-table-pagination ix-table-pagination-end\\" position=\\"bottomEnd\\">
     <li class=\\"ix-pagination-total\\">共 100 项</li>
-    <li class=\\"ix-pagination-item ix-pagination-item-button\\" title=\\"上一页\\"><button class=\\"ix-button ix-button-disabled ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" disabled=\\"\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-left\\" role=\\"img\\" aria-label=\\"left\\"></i></button></li>
-    <li class=\\"ix-pagination-item ix-pagination-item-active\\" title=\\"1\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>1</span></button></li>
-    <li class=\\"ix-pagination-item\\" title=\\"2\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>2</span></button></li>
-    <li class=\\"ix-pagination-item\\" title=\\"3\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>3</span></button></li>
-    <li class=\\"ix-pagination-item\\" title=\\"4\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>4</span></button></li>
-    <li class=\\"ix-pagination-item\\" title=\\"5\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>5</span></button></li>
-    <li class=\\"ix-pagination-item\\" title=\\"向后 5 页\\"><span class=\\"ix-pagination-item-jumper\\"><button class=\\"ix-button ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-double-right\\" role=\\"img\\" aria-label=\\"double-right\\"></i></button><button class=\\"ix-button ix-button-icon-only ix-button-text ix-button-circle ix-button-sm ix-pagination-item-ellipsis\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-ellipsis\\" role=\\"img\\" aria-label=\\"ellipsis\\"></i></button></span></li>
-    <li class=\\"ix-pagination-item\\" title=\\"10\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>10</span></button></li>
-    <li class=\\"ix-pagination-item ix-pagination-item-button\\" title=\\"下一页\\"><button class=\\"ix-button ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" role=\\"img\\" aria-label=\\"right\\"></i></button></li>
+    <li class=\\"ix-pagination-item ix-pagination-item-prev ix-pagination-item-disabled\\" tabindex=\\"-1\\" title=\\"上一页\\"><span class=\\"ix-pagination-item-content\\"><i class=\\"ix-icon ix-icon-left\\" role=\\"img\\" aria-label=\\"left\\"></i></span></li>
+    <li class=\\"ix-pagination-item ix-pagination-item-page ix-pagination-item-active\\" tabindex=\\"0\\" title=\\"1\\"><span class=\\"ix-pagination-item-content\\">1</span></li>
+    <li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"2\\"><span class=\\"ix-pagination-item-content\\">2</span></li>
+    <li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"3\\"><span class=\\"ix-pagination-item-content\\">3</span></li>
+    <li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"4\\"><span class=\\"ix-pagination-item-content\\">4</span></li>
+    <li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"5\\"><span class=\\"ix-pagination-item-content\\">5</span></li>
+    <li class=\\"ix-pagination-item ix-pagination-item-next5\\" tabindex=\\"0\\" title=\\"向后 5 页\\"><span class=\\"ix-pagination-item-content\\"><span class=\\" ix-pagination-item-jumper\\"><i class=\\"ix-icon ix-icon-double-right\\" role=\\"img\\" aria-label=\\"double-right\\"></i><i class=\\"ix-icon ix-icon-ellipsis ix-pagination-item-ellipsis\\" role=\\"img\\" aria-label=\\"ellipsis\\"></i></span></span></li>
+    <li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"10\\"><span class=\\"ix-pagination-item-content\\">10</span></li>
+    <li class=\\"ix-pagination-item ix-pagination-item-next\\" tabindex=\\"0\\" title=\\"下一页\\"><span class=\\"ix-pagination-item-content\\"><i class=\\"ix-icon ix-icon-right\\" role=\\"img\\" aria-label=\\"right\\"></i></span></li>
   </ul>
 </div>"
 `;
diff --git a/packages/components/table/__tests__/table.spec.ts b/packages/components/table/__tests__/table.spec.ts
index f25d448f9..b82deec37 100644
--- a/packages/components/table/__tests__/table.spec.ts
+++ b/packages/components/table/__tests__/table.spec.ts
@@ -182,13 +182,13 @@ describe('Table', () => {
     test('ellipsis work', async () => {
       const wrapper = TableMount({ props: { ellipsis: true } })
 
-      expect(wrapper.find('thead').find('th').classes()).toContain('ix-table-cell-ellipsis')
-      expect(wrapper.find('tbody').find('td').classes()).toContain('ix-table-cell-ellipsis')
+      expect(wrapper.find('thead').findAll('th')[2].classes()).toContain('ix-table-cell-ellipsis')
+      expect(wrapper.find('tbody').findAll('td')[2].classes()).toContain('ix-table-cell-ellipsis')
 
       await wrapper.setProps({ ellipsis: false })
 
-      expect(wrapper.find('thead').find('th').classes()).not.toContain('ix-table-cell-ellipsis')
-      expect(wrapper.find('tbody').find('td').classes()).not.toContain('ix-table-cell-ellipsis')
+      expect(wrapper.find('thead').findAll('th')[2].classes()).not.toContain('ix-table-cell-ellipsis')
+      expect(wrapper.find('tbody').findAll('td')[2].classes()).not.toContain('ix-table-cell-ellipsis')
     })
 
     test('ellipsis with title work', async () => {
diff --git a/packages/components/table/src/composables/usePagination.ts b/packages/components/table/src/composables/usePagination.ts
index d9d12f748..11cae337a 100644
--- a/packages/components/table/src/composables/usePagination.ts
+++ b/packages/components/table/src/composables/usePagination.ts
@@ -52,7 +52,7 @@ export function usePagination(
       ...pagination,
       pageIndex: pagination.pageIndex ?? tempIndex.value,
       pageSize: pagination.pageSize ?? tempSize.value,
-      size: mergedSize.value === 'sm' ? 'sm' : 'md',
+      size: mergedSize.value,
       onChange: handlePageChange,
     }
   })
diff --git a/packages/components/table/src/main/body/BodyCell.tsx b/packages/components/table/src/main/body/BodyCell.tsx
index 2b5d1cc96..060e137b6 100644
--- a/packages/components/table/src/main/body/BodyCell.tsx
+++ b/packages/components/table/src/main/body/BodyCell.tsx
@@ -50,7 +50,7 @@ export default defineComponent({
     const mergedEllipsis = computed(() => {
       // tableProps 的 ellipsis 对特殊(带有 type )的列不生效
       const { type, ellipsis } = props.column as BodyColumn
-      return type ? ellipsis : ellipsis || tableProps.ellipsis
+      return type ? ellipsis : ellipsis ?? tableProps.ellipsis
     })
 
     const classes = computed(() => {
diff --git a/packages/components/table/src/main/head/HeadCell.tsx b/packages/components/table/src/main/head/HeadCell.tsx
index 094d0942d..596ba6658 100644
--- a/packages/components/table/src/main/head/HeadCell.tsx
+++ b/packages/components/table/src/main/head/HeadCell.tsx
@@ -57,7 +57,7 @@ export default defineComponent({
     const mergedEllipsis = computed(() => {
       // tableProps 的 ellipsis 对特殊(带有 type )的列不生效
       const { type, ellipsis } = props.column as HeadColumn
-      return type ? ellipsis : ellipsis || tableProps.ellipsis
+      return type ? ellipsis : ellipsis ?? tableProps.ellipsis
     })
 
     const classes = computed(() => {
diff --git a/packages/pro/table/src/ProTable.tsx b/packages/pro/table/src/ProTable.tsx
index 6c377bdb0..5e1f2c5bc 100644
--- a/packages/pro/table/src/ProTable.tsx
+++ b/packages/pro/table/src/ProTable.tsx
@@ -91,7 +91,7 @@ export default defineComponent({
     }
 
     return () => {
-      const { editable, customAdditional, customTag, ...restProps } = props
+      const { editable, customAdditional, customTag, layoutTool, toolbar, ...restProps } = props
       const resizable = hasResizable.value
 
       const mergedCustomAdditional: TableCustomAdditional = {