diff --git a/tests/button/xdesign.spec.ts b/tests/button/xdesign.spec.ts
new file mode 100644
index 0000000..7ee45e3
--- /dev/null
+++ b/tests/button/xdesign.spec.ts
@@ -0,0 +1,88 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('button 组件xdesign规范', () => {
+  test('button默认--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('button#basic-usage')
+    const demo = page.locator('#basic-usage .pc-demo')
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('basic-usage.png')
+
+    // hover时截图
+    const btns = await demo.locator('.tiny-button').all()
+    let i=1;
+    for(const btn of btns){
+      await btn.hover()
+      await page.waitForTimeout(100)
+      await expect(demo).toBeInViewport()
+      await expect(demo).toHaveScreenshot({threshold:10})
+      i++
+    }
+  })
+
+  test('幽灵--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('button#ghost')
+    const demo = page.locator('#ghost .pc-demo')
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('basic-usage.png')
+
+    // hover时截图
+    const btns = await demo.locator('.tiny-button').all()
+    let i=1;
+    for(const btn of btns){
+      await btn.hover()
+      await page.waitForTimeout(100)
+      await expect(demo).toBeInViewport()
+      await expect(demo).toHaveScreenshot({threshold:10})
+      i++
+    }
+  })
+
+  test('动态禁用--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('button#dynamic-disabled')
+    const demo = page.locator('#dynamic-disabled .pc-demo')
+    await page.waitForTimeout(100)
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('dynamic-disabled1.png')
+
+    const switchBtn = demo.locator('.tiny-switch')
+    await switchBtn.click()
+    await page.waitForTimeout(100)
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('dynamic-disabled2.png')
+  })
+
+  test('图标--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('button#icon')
+    const demo = page.locator('#icon .pc-demo')
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('icon.png')
+  })
+
+  test('文字--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('button#text')
+    const demo = page.locator('#text .pc-demo')
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('text.png')
+  })
+
+  test('加载--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('button#loading')
+    const demo = page.locator('#loading .pc-demo')
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('loading.png')
+  })
+
+  test('尺寸--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('button#size')
+    const demo = page.locator('#size .pc-demo')
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('size.png')
+  })
+})
diff --git a/tests/button/xdesign.spec.ts-snapshots/basic-usage-chromium-win32.png b/tests/button/xdesign.spec.ts-snapshots/basic-usage-chromium-win32.png
new file mode 100644
index 0000000..e6818a6
Binary files /dev/null and b/tests/button/xdesign.spec.ts-snapshots/basic-usage-chromium-win32.png differ
diff --git a/tests/button/xdesign.spec.ts-snapshots/dynamic-disabled1-chromium-win32.png b/tests/button/xdesign.spec.ts-snapshots/dynamic-disabled1-chromium-win32.png
new file mode 100644
index 0000000..5fd385c
Binary files /dev/null and b/tests/button/xdesign.spec.ts-snapshots/dynamic-disabled1-chromium-win32.png differ
diff --git a/tests/button/xdesign.spec.ts-snapshots/dynamic-disabled2-chromium-win32.png b/tests/button/xdesign.spec.ts-snapshots/dynamic-disabled2-chromium-win32.png
new file mode 100644
index 0000000..a83f125
Binary files /dev/null and b/tests/button/xdesign.spec.ts-snapshots/dynamic-disabled2-chromium-win32.png differ
diff --git a/tests/button/xdesign.spec.ts-snapshots/icon-chromium-win32.png b/tests/button/xdesign.spec.ts-snapshots/icon-chromium-win32.png
new file mode 100644
index 0000000..c3b29d5
Binary files /dev/null and b/tests/button/xdesign.spec.ts-snapshots/icon-chromium-win32.png differ
diff --git "a/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-1-chromium-win32.png" "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-1-chromium-win32.png"
new file mode 100644
index 0000000..da12764
Binary files /dev/null and "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-1-chromium-win32.png" differ
diff --git "a/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-10-chromium-win32.png" "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-10-chromium-win32.png"
new file mode 100644
index 0000000..07e7979
Binary files /dev/null and "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-10-chromium-win32.png" differ
diff --git "a/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-11-chromium-win32.png" "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-11-chromium-win32.png"
new file mode 100644
index 0000000..30666f7
Binary files /dev/null and "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-11-chromium-win32.png" differ
diff --git "a/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-12-chromium-win32.png" "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-12-chromium-win32.png"
new file mode 100644
index 0000000..6ffb4db
Binary files /dev/null and "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-12-chromium-win32.png" differ
diff --git "a/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-13-chromium-win32.png" "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-13-chromium-win32.png"
new file mode 100644
index 0000000..4d4fb88
Binary files /dev/null and "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-13-chromium-win32.png" differ
diff --git "a/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-14-chromium-win32.png" "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-14-chromium-win32.png"
new file mode 100644
index 0000000..fbd849d
Binary files /dev/null and "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-14-chromium-win32.png" differ
diff --git "a/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-15-chromium-win32.png" "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-15-chromium-win32.png"
new file mode 100644
index 0000000..e6bea09
Binary files /dev/null and "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-15-chromium-win32.png" differ
diff --git "a/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-16-chromium-win32.png" "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-16-chromium-win32.png"
new file mode 100644
index 0000000..2659a2d
Binary files /dev/null and "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-16-chromium-win32.png" differ
diff --git "a/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-17-chromium-win32.png" "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-17-chromium-win32.png"
new file mode 100644
index 0000000..412535c
Binary files /dev/null and "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-17-chromium-win32.png" differ
diff --git "a/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-18-chromium-win32.png" "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-18-chromium-win32.png"
new file mode 100644
index 0000000..f385dd0
Binary files /dev/null and "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-18-chromium-win32.png" differ
diff --git "a/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-2-chromium-win32.png" "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-2-chromium-win32.png"
new file mode 100644
index 0000000..f1959f3
Binary files /dev/null and "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-2-chromium-win32.png" differ
diff --git "a/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-3-chromium-win32.png" "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-3-chromium-win32.png"
new file mode 100644
index 0000000..cb9028c
Binary files /dev/null and "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-3-chromium-win32.png" differ
diff --git "a/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-4-chromium-win32.png" "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-4-chromium-win32.png"
new file mode 100644
index 0000000..3e5ff0e
Binary files /dev/null and "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-4-chromium-win32.png" differ
diff --git "a/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-5-chromium-win32.png" "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-5-chromium-win32.png"
new file mode 100644
index 0000000..ff66d75
Binary files /dev/null and "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-5-chromium-win32.png" differ
diff --git "a/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-6-chromium-win32.png" "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-6-chromium-win32.png"
new file mode 100644
index 0000000..67bac85
Binary files /dev/null and "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-6-chromium-win32.png" differ
diff --git "a/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-7-chromium-win32.png" "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-7-chromium-win32.png"
new file mode 100644
index 0000000..068374b
Binary files /dev/null and "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-7-chromium-win32.png" differ
diff --git "a/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-8-chromium-win32.png" "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-8-chromium-win32.png"
new file mode 100644
index 0000000..e1a4d4d
Binary files /dev/null and "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-8-chromium-win32.png" differ
diff --git "a/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-9-chromium-win32.png" "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-9-chromium-win32.png"
new file mode 100644
index 0000000..4a628bc
Binary files /dev/null and "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-button\351\273\230\350\256\244--UI\346\210\252\345\233\276-9-chromium-win32.png" differ
diff --git "a/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-\345\271\275\347\201\265--UI\346\210\252\345\233\276-1-chromium-win32.png" "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-\345\271\275\347\201\265--UI\346\210\252\345\233\276-1-chromium-win32.png"
new file mode 100644
index 0000000..9a46795
Binary files /dev/null and "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-\345\271\275\347\201\265--UI\346\210\252\345\233\276-1-chromium-win32.png" differ
diff --git "a/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-\345\271\275\347\201\265--UI\346\210\252\345\233\276-2-chromium-win32.png" "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-\345\271\275\347\201\265--UI\346\210\252\345\233\276-2-chromium-win32.png"
new file mode 100644
index 0000000..6d3979e
Binary files /dev/null and "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-\345\271\275\347\201\265--UI\346\210\252\345\233\276-2-chromium-win32.png" differ
diff --git "a/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-\345\271\275\347\201\265--UI\346\210\252\345\233\276-3-chromium-win32.png" "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-\345\271\275\347\201\265--UI\346\210\252\345\233\276-3-chromium-win32.png"
new file mode 100644
index 0000000..ddd0e78
Binary files /dev/null and "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-\345\271\275\347\201\265--UI\346\210\252\345\233\276-3-chromium-win32.png" differ
diff --git "a/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-\345\271\275\347\201\265--UI\346\210\252\345\233\276-4-chromium-win32.png" "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-\345\271\275\347\201\265--UI\346\210\252\345\233\276-4-chromium-win32.png"
new file mode 100644
index 0000000..2ce5e37
Binary files /dev/null and "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-\345\271\275\347\201\265--UI\346\210\252\345\233\276-4-chromium-win32.png" differ
diff --git "a/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-\345\271\275\347\201\265--UI\346\210\252\345\233\276-5-chromium-win32.png" "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-\345\271\275\347\201\265--UI\346\210\252\345\233\276-5-chromium-win32.png"
new file mode 100644
index 0000000..896fd74
Binary files /dev/null and "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-\345\271\275\347\201\265--UI\346\210\252\345\233\276-5-chromium-win32.png" differ
diff --git "a/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-\345\271\275\347\201\265--UI\346\210\252\345\233\276-6-chromium-win32.png" "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-\345\271\275\347\201\265--UI\346\210\252\345\233\276-6-chromium-win32.png"
new file mode 100644
index 0000000..a412492
Binary files /dev/null and "b/tests/button/xdesign.spec.ts-snapshots/input\347\273\204\344\273\266xdesign\350\247\204\350\214\203-\345\271\275\347\201\265--UI\346\210\252\345\233\276-6-chromium-win32.png" differ
diff --git a/tests/button/xdesign.spec.ts-snapshots/size-chromium-win32.png b/tests/button/xdesign.spec.ts-snapshots/size-chromium-win32.png
new file mode 100644
index 0000000..2baa51d
Binary files /dev/null and b/tests/button/xdesign.spec.ts-snapshots/size-chromium-win32.png differ
diff --git a/tests/button/xdesign.spec.ts-snapshots/text-chromium-win32.png b/tests/button/xdesign.spec.ts-snapshots/text-chromium-win32.png
new file mode 100644
index 0000000..268c2bb
Binary files /dev/null and b/tests/button/xdesign.spec.ts-snapshots/text-chromium-win32.png differ