diff --git a/.github/workflows/development.yml b/.github/workflows/development.yml
index 92ceab00..fe526cf4 100644
--- a/.github/workflows/development.yml
+++ b/.github/workflows/development.yml
@@ -52,12 +52,12 @@ jobs:
       - name: ☁️ checkout repository
         uses: actions/checkout@v4
 
-      - name: "🔧 setup pnpm"
+      - name: 🔧 setup pnpm
         uses: pnpm/action-setup@v3
         with:
           version: 9
 
-      - name: "🔧 setup node"
+      - name: 🔧 setup node
         uses: actions/setup-node@v4
         with:
           node-version: 20
@@ -74,36 +74,4 @@ jobs:
         uses: google/wireit@setup-github-actions-caching/v2
 
       - name: 🧪 run tests
-        run: |
-          pnpm test | tee output.log
-          if grep -q -e "Error: A snapshot doesn't exist at" -e "Screenshot comparison failed" output.log; then
-            echo "Playwright tests failed due to a snapshot issue."
-            echo "SNAPSHOT_DIFFERENCES=true" >> $GITHUB_ENV
-            exit 1
-          elif grep -q "failed" output.log; then
-            echo "Playwright tests failed due to a non-snapshot issue."
-            exit 1
-          fi
-
-      - name: 🗄️ archive artifacts
-        uses: actions/upload-artifact@v4
-        id: artifact-upload
-        if: ${{ !cancelled() }}
-        with:
-          name: playwright-report
-          path: packages/web-components/playwright-report/
-          retention-days: 30
-
-      - name: ✍️ comment on PR with report link
-        uses: thollander/actions-comment-pull-request@v3
-        if: ${{ failure() && env.SNAPSHOT_DIFFERENCES == 'true' }}
-        with:
-          message: |
-            > [!CAUTION]
-            > Playwright visual snapshot differences were detected.
-            > You can download the [report](${{ steps.artifact-upload.outputs.artifact-url }}) file.
-
-            To approve the snapshot changes and update the snapshots, please comment:
-            ```
-            /approve-snapshots
-            ```
+        run: pnpm test
diff --git a/.github/workflows/update-snapshots.yml b/.github/workflows/update-snapshots.yml
deleted file mode 100644
index 78aebf5a..00000000
--- a/.github/workflows/update-snapshots.yml
+++ /dev/null
@@ -1,66 +0,0 @@
-name: 📸 Update Snapshots from /approve-snapshots
-
-on:
-  issue_comment:
-    types:
-      - created
-
-permissions:
-  contents: write
-  pull-requests: write
-
-jobs:
-  update-snapshots:
-    name: Update Snapshots
-    if: ${{ github.event.issue.pull_request && github.event.comment.body == '/approve-snapshots' }}
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: 🔍 get PR branch
-        uses: xt0rted/pull-request-comment-branch@v2
-        id: comment-branch
-
-      - name: ☁️ checkout PR branch
-        uses: actions/checkout@v4
-        with:
-          ref: ${{ steps.comment-branch.outputs.head_ref }}
-
-      - name: ✍️ comment action started
-        uses: thollander/actions-comment-pull-request@v3
-        with:
-          message: |
-            > /approve-snapshots
-
-            ⏳ Updating snapshots. Click [here](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}) to see the status.
-
-      - name: 🔧 setup pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: 9
-
-
-      - name: 🔧 setup node
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: "pnpm"
-
-      - name: 📦 install dependencies
-        run: pnpm install
-
-      - name: 🎭 install playwright
-        run: pnpm playwright install --with-deps --only-shell
-
-      - name: 📸 update snapshots
-        run: pnpm run test:update-snapshots
-
-      - name: ⚙️ commit and push updated snapshots
-        uses: stefanzweifel/git-auto-commit-action@v5
-        with:
-          commit_message: 'Update e2e snapshots'
-
-      - name: ✅ comment success
-        uses: thollander/actions-comment-pull-request@v3
-        with:
-          message: |
-            ✅ Successfully updated and committed Playwright snapshots!
diff --git a/packages/web-components/playwright.config.ts b/packages/web-components/playwright.config.ts
index 9913eaeb..165c94e5 100644
--- a/packages/web-components/playwright.config.ts
+++ b/packages/web-components/playwright.config.ts
@@ -6,19 +6,19 @@ export default defineConfig({
   retries: process.env.CI ? 2 : undefined,
   forbidOnly: !!process.env.CI,
   reporter: process.env.CI
-    ? [["github"], ["html", { open: "never" }]]
+    ? [["github"]]
     : [["list"], ["html", { open: "never" }]],
   projects: [
     {
-      name: "💻 Desktop",
+      name: "desktop",
       use: devices["Desktop Chrome"],
     },
     // {
-    //   name: "📱 iOS",
+    //   name: "iOS",
     //   use: devices["iPhone X"],
     // },
     {
-      name: "📱 Android",
+      name: "android",
       use: devices["Galaxy S9+"],
     },
   ],
@@ -35,4 +35,10 @@ export default defineConfig({
       timeout: 1000,
     },
   },
+  snapshotPathTemplate: `{testDir}/{testFileDir}/test-snapshots/{arg}{ext}`,
+  expect: {
+    toHaveScreenshot: {
+      maxDiffPixels: 100,
+    },
+  },
 });
diff --git a/packages/web-components/src/button/icon-button/icon-button.test.ts b/packages/web-components/src/button/icon-button/icon-button.test.ts
index 380cc522..28b63827 100644
--- a/packages/web-components/src/button/icon-button/icon-button.test.ts
+++ b/packages/web-components/src/button/icon-button/icon-button.test.ts
@@ -198,4 +198,50 @@ describe("🧩 icon-button", () => {
     await expect(spinner).toBeVisible();
     await expect(root).toHaveAttribute("aria-busy", "true");
   });
+
+  test("📸 should have correct ui in different variants, sizes and loading states", async ({
+    page,
+  }) => {
+    const sizeValues = ["sm", "md", "lg"];
+    const loadingValues = [true, false];
+    const variantValues = [
+      "primary",
+      "ghost",
+      "naked",
+      "elevated",
+      "destructive",
+      "brand",
+    ];
+
+    for (const variant of variantValues) {
+      for (const size of sizeValues) {
+        for (const loading of loadingValues) {
+          await render(
+            page,
+            `
+            <tapsi-icon-button
+              label="test-button"
+              data-testid="test-button"
+              variant="${variant}"
+              size="${size}"
+              ${loading ? "loading" : ""}
+            >
+              <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path d="M11.9996 22C10.7496 22 9.57878 21.7625 8.48711 21.2875C7.39544 20.8125 6.44544 20.1708 5.63711 19.3625C4.82878 18.5541 4.18711 17.6041 3.71211 16.5125C3.23711 15.4208 2.99961 14.25 2.99961 13C2.99961 11.75 3.23711 10.5791 3.71211 9.48748C4.18711 8.39581 4.82878 7.44581 5.63711 6.63748C6.44544 5.82914 7.39544 5.18748 8.48711 4.71248C9.57878 4.23748 10.7496 3.99998 11.9996 3.99998C13.2496 3.99998 14.4204 4.23748 15.5121 4.71248C16.6038 5.18748 17.5538 5.82914 18.3621 6.63748C19.1704 7.44581 19.8121 8.39581 20.2871 9.48748C20.7621 10.5791 20.9996 11.75 20.9996 13C20.9996 14.25 20.7621 15.4208 20.2871 16.5125C19.8121 17.6041 19.1704 18.5541 18.3621 19.3625C17.5538 20.1708 16.6038 20.8125 15.5121 21.2875C14.4204 21.7625 13.2496 22 11.9996 22ZM14.7996 17.2L16.1996 15.8L12.9996 12.6V7.99998H10.9996V13.4L14.7996 17.2ZM5.59961 2.34998L6.99961 3.74998L2.74961 7.99998L1.34961 6.59998L5.59961 2.34998ZM18.3996 2.34998L22.6496 6.59998L21.2496 7.99998L16.9996 3.74998L18.3996 2.34998ZM11.9996 20C13.9496 20 15.6038 19.3208 16.9621 17.9625C18.3204 16.6041 18.9996 14.95 18.9996 13C18.9996 11.05 18.3204 9.39581 16.9621 8.03748C15.6038 6.67914 13.9496 5.99998 11.9996 5.99998C10.0496 5.99998 8.39544 6.67914 7.03711 8.03748C5.67878 9.39581 4.99961 11.05 4.99961 13C4.99961 14.95 5.67878 16.6041 7.03711 17.9625C8.39544 19.3208 10.0496 20 11.9996 20Z" fill="currentColor"/>
+              </svg>
+            </tapsi-icon-button>
+            `,
+          );
+          const component = page.getByTestId("test-button");
+
+          const screenshot = `${["icon-button", size, variant, loading && "loading"].filter(Boolean).join("_")}.png`;
+
+          await expect(component).toHaveScreenshot(screenshot, {
+            animations: "disabled", // we disable animations because of the spinner
+            omitBackground: true,
+          });
+        }
+      }
+    }
+  });
 });
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-brand-loading.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-brand-loading.png
new file mode 100644
index 00000000..93c7b0e4
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-brand-loading.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-brand.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-brand.png
new file mode 100644
index 00000000..7a86df74
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-brand.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-destructive-loading.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-destructive-loading.png
new file mode 100644
index 00000000..39949472
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-destructive-loading.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-destructive.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-destructive.png
new file mode 100644
index 00000000..dcc5d61f
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-destructive.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-elevated-loading.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-elevated-loading.png
new file mode 100644
index 00000000..6f77e79a
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-elevated-loading.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-elevated.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-elevated.png
new file mode 100644
index 00000000..4f251dc1
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-elevated.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-ghost-loading.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-ghost-loading.png
new file mode 100644
index 00000000..e44f46f3
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-ghost-loading.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-ghost.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-ghost.png
new file mode 100644
index 00000000..f5e3b132
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-ghost.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-naked-loading.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-naked-loading.png
new file mode 100644
index 00000000..8e9dd9e5
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-naked-loading.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-naked.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-naked.png
new file mode 100644
index 00000000..4722a272
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-naked.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-primary-loading.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-primary-loading.png
new file mode 100644
index 00000000..53193425
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-primary-loading.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-primary.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-primary.png
new file mode 100644
index 00000000..51ee1e3c
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-lg-primary.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-brand-loading.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-brand-loading.png
new file mode 100644
index 00000000..30082f8f
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-brand-loading.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-brand.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-brand.png
new file mode 100644
index 00000000..5012e7b9
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-brand.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-destructive-loading.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-destructive-loading.png
new file mode 100644
index 00000000..5e99f845
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-destructive-loading.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-destructive.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-destructive.png
new file mode 100644
index 00000000..5f1c4f38
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-destructive.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-elevated-loading.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-elevated-loading.png
new file mode 100644
index 00000000..40573cf2
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-elevated-loading.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-elevated.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-elevated.png
new file mode 100644
index 00000000..9c103bce
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-elevated.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-ghost-loading.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-ghost-loading.png
new file mode 100644
index 00000000..e6bc934a
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-ghost-loading.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-ghost.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-ghost.png
new file mode 100644
index 00000000..70118fe7
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-ghost.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-naked-loading.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-naked-loading.png
new file mode 100644
index 00000000..00865f2a
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-naked-loading.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-naked.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-naked.png
new file mode 100644
index 00000000..0f216ed6
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-naked.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-primary-loading.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-primary-loading.png
new file mode 100644
index 00000000..aaab8b10
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-primary-loading.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-primary.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-primary.png
new file mode 100644
index 00000000..6ea81c57
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-md-primary.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-brand-loading.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-brand-loading.png
new file mode 100644
index 00000000..81e20565
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-brand-loading.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-brand.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-brand.png
new file mode 100644
index 00000000..2c3b7772
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-brand.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-destructive-loading.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-destructive-loading.png
new file mode 100644
index 00000000..94371613
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-destructive-loading.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-destructive.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-destructive.png
new file mode 100644
index 00000000..4c52f09b
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-destructive.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-elevated-loading.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-elevated-loading.png
new file mode 100644
index 00000000..430bb192
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-elevated-loading.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-elevated.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-elevated.png
new file mode 100644
index 00000000..2cdbdb6a
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-elevated.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-ghost-loading.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-ghost-loading.png
new file mode 100644
index 00000000..3de17ed2
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-ghost-loading.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-ghost.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-ghost.png
new file mode 100644
index 00000000..d3cf1af7
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-ghost.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-naked-loading.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-naked-loading.png
new file mode 100644
index 00000000..086752d1
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-naked-loading.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-naked.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-naked.png
new file mode 100644
index 00000000..439bb502
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-naked.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-primary-loading.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-primary-loading.png
new file mode 100644
index 00000000..9642ef15
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-primary-loading.png differ
diff --git a/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-primary.png b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-primary.png
new file mode 100644
index 00000000..43d25e5d
Binary files /dev/null and b/packages/web-components/src/button/icon-button/test-snapshots/icon-button-sm-primary.png differ
diff --git a/packages/web-components/src/button/standard/button.test.ts b/packages/web-components/src/button/standard/button.test.ts
index 3f566650..ea3c585b 100644
--- a/packages/web-components/src/button/standard/button.test.ts
+++ b/packages/web-components/src/button/standard/button.test.ts
@@ -210,4 +210,48 @@ describe("🧩 button", () => {
     await expect(spinner).toBeVisible();
     await expect(root).toHaveAttribute("aria-busy", "true");
   });
+
+  test("📸 should have correct ui in different variants, sizes and loading states", async ({
+    page,
+  }) => {
+    const sizeValues = ["sm", "md", "lg"];
+    const loadingValues = [true, false];
+    const variantValues = [
+      "primary",
+      "ghost",
+      "naked",
+      "elevated",
+      "destructive",
+      "brand",
+    ];
+
+    for (const variant of variantValues) {
+      for (const size of sizeValues) {
+        for (const loading of loadingValues) {
+          await render(
+            page,
+            `
+            <tapsi-button
+              label="test-button"
+              data-testid="test-button"
+              variant="${variant}"
+              size="${size}"
+              ${loading ? "loading" : ""}
+            >
+              عنوان
+            </tapsi-button>
+            `,
+          );
+          const component = page.getByTestId("test-button");
+
+          const screenshot = `${["button", size, variant, loading && "loading"].filter(Boolean).join("_")}.png`;
+
+          await expect(component).toHaveScreenshot(screenshot, {
+            animations: "disabled", // we disable animations because of the spinner
+            omitBackground: true,
+          });
+        }
+      }
+    }
+  });
 });
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-lg-brand-loading.png b/packages/web-components/src/button/standard/test-snapshots/button-lg-brand-loading.png
new file mode 100644
index 00000000..de94b211
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-lg-brand-loading.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-lg-brand.png b/packages/web-components/src/button/standard/test-snapshots/button-lg-brand.png
new file mode 100644
index 00000000..3cf71385
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-lg-brand.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-lg-destructive-loading.png b/packages/web-components/src/button/standard/test-snapshots/button-lg-destructive-loading.png
new file mode 100644
index 00000000..6e0aacaa
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-lg-destructive-loading.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-lg-destructive.png b/packages/web-components/src/button/standard/test-snapshots/button-lg-destructive.png
new file mode 100644
index 00000000..7226db8b
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-lg-destructive.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-lg-elevated-loading.png b/packages/web-components/src/button/standard/test-snapshots/button-lg-elevated-loading.png
new file mode 100644
index 00000000..6aa6fceb
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-lg-elevated-loading.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-lg-elevated.png b/packages/web-components/src/button/standard/test-snapshots/button-lg-elevated.png
new file mode 100644
index 00000000..fcc7c372
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-lg-elevated.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-lg-ghost-loading.png b/packages/web-components/src/button/standard/test-snapshots/button-lg-ghost-loading.png
new file mode 100644
index 00000000..fb420f1b
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-lg-ghost-loading.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-lg-ghost.png b/packages/web-components/src/button/standard/test-snapshots/button-lg-ghost.png
new file mode 100644
index 00000000..4e5b32b4
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-lg-ghost.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-lg-naked-loading.png b/packages/web-components/src/button/standard/test-snapshots/button-lg-naked-loading.png
new file mode 100644
index 00000000..205f5733
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-lg-naked-loading.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-lg-naked.png b/packages/web-components/src/button/standard/test-snapshots/button-lg-naked.png
new file mode 100644
index 00000000..07c147a5
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-lg-naked.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-lg-primary-loading.png b/packages/web-components/src/button/standard/test-snapshots/button-lg-primary-loading.png
new file mode 100644
index 00000000..b1e405f3
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-lg-primary-loading.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-lg-primary.png b/packages/web-components/src/button/standard/test-snapshots/button-lg-primary.png
new file mode 100644
index 00000000..3d215bfc
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-lg-primary.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-md-brand-loading.png b/packages/web-components/src/button/standard/test-snapshots/button-md-brand-loading.png
new file mode 100644
index 00000000..26e444bf
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-md-brand-loading.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-md-brand.png b/packages/web-components/src/button/standard/test-snapshots/button-md-brand.png
new file mode 100644
index 00000000..797d1aa1
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-md-brand.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-md-destructive-loading.png b/packages/web-components/src/button/standard/test-snapshots/button-md-destructive-loading.png
new file mode 100644
index 00000000..e6d24c1b
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-md-destructive-loading.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-md-destructive.png b/packages/web-components/src/button/standard/test-snapshots/button-md-destructive.png
new file mode 100644
index 00000000..b0642441
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-md-destructive.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-md-elevated-loading.png b/packages/web-components/src/button/standard/test-snapshots/button-md-elevated-loading.png
new file mode 100644
index 00000000..ba1494ae
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-md-elevated-loading.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-md-elevated.png b/packages/web-components/src/button/standard/test-snapshots/button-md-elevated.png
new file mode 100644
index 00000000..a0272a93
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-md-elevated.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-md-ghost-loading.png b/packages/web-components/src/button/standard/test-snapshots/button-md-ghost-loading.png
new file mode 100644
index 00000000..3a7c0dda
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-md-ghost-loading.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-md-ghost.png b/packages/web-components/src/button/standard/test-snapshots/button-md-ghost.png
new file mode 100644
index 00000000..2c84a0b9
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-md-ghost.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-md-naked-loading.png b/packages/web-components/src/button/standard/test-snapshots/button-md-naked-loading.png
new file mode 100644
index 00000000..926f6226
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-md-naked-loading.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-md-naked.png b/packages/web-components/src/button/standard/test-snapshots/button-md-naked.png
new file mode 100644
index 00000000..fe887025
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-md-naked.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-md-primary-loading.png b/packages/web-components/src/button/standard/test-snapshots/button-md-primary-loading.png
new file mode 100644
index 00000000..d911b076
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-md-primary-loading.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-md-primary.png b/packages/web-components/src/button/standard/test-snapshots/button-md-primary.png
new file mode 100644
index 00000000..9c837b43
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-md-primary.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-sm-brand-loading.png b/packages/web-components/src/button/standard/test-snapshots/button-sm-brand-loading.png
new file mode 100644
index 00000000..395dfe64
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-sm-brand-loading.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-sm-brand.png b/packages/web-components/src/button/standard/test-snapshots/button-sm-brand.png
new file mode 100644
index 00000000..e3118664
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-sm-brand.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-sm-destructive-loading.png b/packages/web-components/src/button/standard/test-snapshots/button-sm-destructive-loading.png
new file mode 100644
index 00000000..db501c58
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-sm-destructive-loading.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-sm-destructive.png b/packages/web-components/src/button/standard/test-snapshots/button-sm-destructive.png
new file mode 100644
index 00000000..4310efb2
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-sm-destructive.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-sm-elevated-loading.png b/packages/web-components/src/button/standard/test-snapshots/button-sm-elevated-loading.png
new file mode 100644
index 00000000..a1b101d6
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-sm-elevated-loading.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-sm-elevated.png b/packages/web-components/src/button/standard/test-snapshots/button-sm-elevated.png
new file mode 100644
index 00000000..ef2f5979
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-sm-elevated.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-sm-ghost-loading.png b/packages/web-components/src/button/standard/test-snapshots/button-sm-ghost-loading.png
new file mode 100644
index 00000000..d3136d3d
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-sm-ghost-loading.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-sm-ghost.png b/packages/web-components/src/button/standard/test-snapshots/button-sm-ghost.png
new file mode 100644
index 00000000..18200fd8
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-sm-ghost.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-sm-naked-loading.png b/packages/web-components/src/button/standard/test-snapshots/button-sm-naked-loading.png
new file mode 100644
index 00000000..bebaf009
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-sm-naked-loading.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-sm-naked.png b/packages/web-components/src/button/standard/test-snapshots/button-sm-naked.png
new file mode 100644
index 00000000..0f0ef1b3
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-sm-naked.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-sm-primary-loading.png b/packages/web-components/src/button/standard/test-snapshots/button-sm-primary-loading.png
new file mode 100644
index 00000000..ddb51ee3
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-sm-primary-loading.png differ
diff --git a/packages/web-components/src/button/standard/test-snapshots/button-sm-primary.png b/packages/web-components/src/button/standard/test-snapshots/button-sm-primary.png
new file mode 100644
index 00000000..45f2669b
Binary files /dev/null and b/packages/web-components/src/button/standard/test-snapshots/button-sm-primary.png differ