diff --git a/src/components/base/button/__tests__/Button.spec.ts b/src/components/base/button/__tests__/Button.spec.ts
index 3ebaf69d7..4f5e34f54 100644
--- a/src/components/base/button/__tests__/Button.spec.ts
+++ b/src/components/base/button/__tests__/Button.spec.ts
@@ -5,6 +5,7 @@ import { mount } from "@vue/test-utils";
 describe("Button", () => {
   it("should render", () => {
     expect(mount(VButton).html()).contains("button");
+    expect(mount(VButton).html()).toMatchSnapshot();
   });
 
   it("should render with text", () => {
@@ -19,6 +20,8 @@ describe("Button", () => {
 
     ["primary", "secondary", "danger"].forEach((type) => {
       const button = mount(VButton, { props: { type } });
+
+      expect(button.html()).toMatchSnapshot();
       expect(button.find(".btn").classes()).toContain(`btn-${type}`);
       button.unmount();
     });
@@ -30,6 +33,8 @@ describe("Button", () => {
 
     ["lg", "sm", "xs"].forEach((size) => {
       const button = mount(VButton, { props: { size } });
+
+      expect(button.html()).toMatchSnapshot();
       expect(button.find(".btn").classes()).toContain(`btn-${size}`);
       button.unmount();
     });
@@ -42,6 +47,7 @@ describe("Button", () => {
     expect(button.find(".btn").classes()).not.toContain("btn-circle");
 
     await button.setProps({ circle: true });
+    expect(button.html()).toMatchSnapshot();
     expect(button.find(".btn").classes()).toContain("btn-circle");
   });
 
@@ -52,6 +58,7 @@ describe("Button", () => {
     expect(button.find(".btn").classes()).not.toContain("btn-block");
 
     await button.setProps({ block: true });
+    expect(button.html()).toMatchSnapshot();
     expect(button.find(".btn").classes()).toContain("btn-block");
   });
 
@@ -69,6 +76,8 @@ describe("Button", () => {
     onClick.mockReset();
     await button.setProps({ disabled: true });
     await button.trigger("click");
+
+    expect(button.html()).toMatchSnapshot();
     expect(onClick).not.toHaveBeenCalled();
   });
 });
diff --git a/src/components/base/button/__tests__/__snapshots__/Button.spec.ts.snap b/src/components/base/button/__tests__/__snapshots__/Button.spec.ts.snap
new file mode 100644
index 000000000..08e71d332
--- /dev/null
+++ b/src/components/base/button/__tests__/__snapshots__/Button.spec.ts.snap
@@ -0,0 +1,21 @@
+// Vitest Snapshot v1
+
+exports[`Button > should render 1`] = `"<button class=\\"btn btn-md btn-default\\"></button>"`;
+
+exports[`Button > should work with block prop 1`] = `"<button class=\\"btn btn-md btn-default btn-block\\"></button>"`;
+
+exports[`Button > should work with circle prop 1`] = `"<button class=\\"btn btn-md btn-default btn-circle\\"></button>"`;
+
+exports[`Button > should work with disabled prop 1`] = `"<button class=\\"btn btn-md btn-default\\" disabled=\\"\\"></button>"`;
+
+exports[`Button > should work with size prop 1`] = `"<button class=\\"btn btn-lg btn-default\\"></button>"`;
+
+exports[`Button > should work with size prop 2`] = `"<button class=\\"btn btn-sm btn-default\\"></button>"`;
+
+exports[`Button > should work with size prop 3`] = `"<button class=\\"btn btn-xs btn-default\\"></button>"`;
+
+exports[`Button > should work with type prop 1`] = `"<button class=\\"btn btn-md btn-primary\\"></button>"`;
+
+exports[`Button > should work with type prop 2`] = `"<button class=\\"btn btn-md btn-secondary\\"></button>"`;
+
+exports[`Button > should work with type prop 3`] = `"<button class=\\"btn btn-md btn-danger\\"></button>"`;