diff --git a/.changeset/angry-spoons-grin.md b/.changeset/angry-spoons-grin.md
new file mode 100644
index 00000000000..c49e3e0e8ca
--- /dev/null
+++ b/.changeset/angry-spoons-grin.md
@@ -0,0 +1,10 @@
+---
+"@primer/react": patch
+---
+
+- Add a block prop for full width
+- Add alignContent prop to align content to center or start for full width buttons
+- Use control sizing CSS variable values (not using CSS vars just yet)
+- Use height over padding for more control over sizing
+- Adjust invisible button variant to match new design using ActionList colors
+
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-dark-colorblind-linux.png
index 4d46967ddff..96fa576cb44 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-dark-dimmed-linux.png
index 7c279cae7cf..95fc456b5a1 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-dark-high-contrast-linux.png
index 269fa7e9bc1..023f76c77f7 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-dark-linux.png
index aafe2d94635..83a20efc55d 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-dark-tritanopia-linux.png
index aafe2d94635..83a20efc55d 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-light-colorblind-linux.png
index 768d375e76f..0a0d7b132f4 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-light-high-contrast-linux.png
index a51421a63d0..dae7d216dbd 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-light-linux.png
index a9478d40c75..9e2ca27cf01 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-light-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-light-tritanopia-linux.png
index a9478d40c75..9e2ca27cf01 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Danger-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-dark-colorblind-linux.png
index 09fca2c6b20..e3d5a91a66b 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-dark-dimmed-linux.png
index 80e8ad1fcac..56d48dbc00a 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-dark-high-contrast-linux.png
index 2b7eecc23d7..857e7d3bc0c 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-dark-linux.png
index 09fca2c6b20..e3d5a91a66b 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-dark-tritanopia-linux.png
index 09fca2c6b20..e3d5a91a66b 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-light-colorblind-linux.png
index 9a6e7d2477b..5762cf818cd 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-light-high-contrast-linux.png
index 27bffd473f7..cd7ea93d91a 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-light-linux.png
index 9a6e7d2477b..5762cf818cd 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-light-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-light-tritanopia-linux.png
index 9a6e7d2477b..5762cf818cd 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Default-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-dark-high-contrast-linux.png
index 7e6709c4fa9..1a6f14f4040 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-colorblind-linux.png
index c05ad07b61e..29cde67f322 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-high-contrast-linux.png
index 08d492a3a67..8b9f8c96d23 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-linux.png
index c05ad07b61e..29cde67f322 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-tritanopia-linux.png
index c05ad07b61e..29cde67f322 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Disabled-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-dark-colorblind-linux.png
index 6da539b28fd..3eeceac5f96 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-dark-dimmed-linux.png
index e0bf05aa9e6..4b7ff48113a 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-dark-high-contrast-linux.png
index b79bdd43ac2..ea3f43522f6 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-dark-linux.png
index 6da539b28fd..3eeceac5f96 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-dark-tritanopia-linux.png
index 6da539b28fd..3eeceac5f96 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-light-colorblind-linux.png
index d45ffd005a8..8ca573d8cb9 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-light-high-contrast-linux.png
index c5d60926a9f..cadeebdeb0a 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-light-linux.png
index d45ffd005a8..8ca573d8cb9 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-light-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-light-tritanopia-linux.png
index d45ffd005a8..8ca573d8cb9 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-dark-colorblind-linux.png
index 40a0c859db8..afd7b05b4c9 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-dark-dimmed-linux.png
index ca1b5b17751..d35df7a4ec0 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-dark-high-contrast-linux.png
index 5f38391c8cc..3eba9aac4ad 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-dark-linux.png
index 40a0c859db8..afd7b05b4c9 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-dark-tritanopia-linux.png
index 40a0c859db8..afd7b05b4c9 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-light-colorblind-linux.png
index 6970fb25932..3a8fb2fe2f0 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-light-high-contrast-linux.png
index f073bec60e3..884474df496 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-light-linux.png
index 6970fb25932..3a8fb2fe2f0 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-light-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-light-tritanopia-linux.png
index 6970fb25932..3a8fb2fe2f0 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Large-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-dark-colorblind-linux.png
index bcb81af0467..36d2a45986e 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-dark-dimmed-linux.png
index 9ff68751dab..6af5e736bb0 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-dark-high-contrast-linux.png
index b79587f4afe..9c595667f02 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-dark-linux.png
index bcb81af0467..36d2a45986e 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-dark-tritanopia-linux.png
index bcb81af0467..36d2a45986e 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-light-colorblind-linux.png
index 093d2de4152..d45c0170307 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-light-high-contrast-linux.png
index fc2901cc27b..b533d6b9181 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-light-linux.png
index 093d2de4152..d45c0170307 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-light-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-light-tritanopia-linux.png
index 093d2de4152..d45c0170307 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Leading-Visual-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-dark-colorblind-linux.png
index 09fca2c6b20..e3d5a91a66b 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-dark-dimmed-linux.png
index 80e8ad1fcac..56d48dbc00a 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-dark-high-contrast-linux.png
index 2b7eecc23d7..857e7d3bc0c 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-dark-linux.png
index 09fca2c6b20..e3d5a91a66b 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-dark-tritanopia-linux.png
index 09fca2c6b20..e3d5a91a66b 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-light-colorblind-linux.png
index 9a6e7d2477b..5762cf818cd 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-light-high-contrast-linux.png
index 27bffd473f7..cd7ea93d91a 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-light-linux.png
index 9a6e7d2477b..5762cf818cd 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-light-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-light-tritanopia-linux.png
index 9a6e7d2477b..5762cf818cd 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Medium-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-colorblind-linux.png
index 37a4bdfe8be..aa0f3d2ac3a 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-dimmed-linux.png
index e4081923124..e331fe785f4 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-high-contrast-linux.png
index 379f2bd5aa1..35074bda2ab 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-linux.png
index 37a4bdfe8be..aa0f3d2ac3a 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-tritanopia-linux.png
index 37a4bdfe8be..aa0f3d2ac3a 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-colorblind-linux.png
index 9893ec21912..e3f7ea01ccd 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-high-contrast-linux.png
index e4cdf292d82..cbdddbc1c78 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-linux.png
index 9893ec21912..e3f7ea01ccd 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-tritanopia-linux.png
index 9893ec21912..e3f7ea01ccd 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-colorblind-linux.png
index 09fca2c6b20..e3d5a91a66b 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-dimmed-linux.png
index 80e8ad1fcac..56d48dbc00a 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-high-contrast-linux.png
index 2b7eecc23d7..857e7d3bc0c 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-linux.png
index 09fca2c6b20..e3d5a91a66b 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-tritanopia-linux.png
index 09fca2c6b20..e3d5a91a66b 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-colorblind-linux.png
index 9a6e7d2477b..5762cf818cd 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-high-contrast-linux.png
index 27bffd473f7..cd7ea93d91a 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-linux.png
index 9a6e7d2477b..5762cf818cd 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-tritanopia-linux.png
index 9a6e7d2477b..5762cf818cd 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Playground-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-dark-colorblind-linux.png
index 0163734217f..dc4d05ce9d9 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-dark-dimmed-linux.png
index 549458e0684..6c6ae9fa1db 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-dark-high-contrast-linux.png
index baa9f12ddb8..5244e303e67 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-dark-linux.png
index 9b4f6a6ddcd..3d0da735bb5 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-dark-tritanopia-linux.png
index 0163734217f..dc4d05ce9d9 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-light-colorblind-linux.png
index e1f9cc0742e..74e72ecb972 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-light-high-contrast-linux.png
index 22cca92d77c..cf8968e0ee4 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-light-linux.png
index 244bcebe27f..9687ccc31e3 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-light-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-light-tritanopia-linux.png
index e1f9cc0742e..74e72ecb972 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Primary-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-dark-colorblind-linux.png
index 6a72a96baf1..aff81a49101 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-dark-dimmed-linux.png
index a52a6610793..98b02c72117 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-dark-high-contrast-linux.png
index a722086fbdd..ecd451e4315 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-dark-linux.png
index 6a72a96baf1..aff81a49101 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-dark-tritanopia-linux.png
index 6a72a96baf1..aff81a49101 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-light-colorblind-linux.png
index 0bffaa41c89..c8f16253757 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-light-high-contrast-linux.png
index c469395bc1d..ac720db602f 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-light-linux.png
index 0bffaa41c89..c8f16253757 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-light-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-light-tritanopia-linux.png
index 0bffaa41c89..c8f16253757 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Small-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-colorblind-linux.png
index 26296728bb7..356e04c2210 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-dimmed-linux.png
index 7ca9111cd62..04cb590fdb1 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-high-contrast-linux.png
index 6252315f7e2..f72ac95fbdc 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-linux.png
index 26296728bb7..356e04c2210 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-tritanopia-linux.png
index 26296728bb7..356e04c2210 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-colorblind-linux.png
index dea638e1509..d464f75c686 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-high-contrast-linux.png
index d92dd05d7ef..6d0cb868d34 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-linux.png
index dea638e1509..d464f75c686 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-tritanopia-linux.png
index dea638e1509..d464f75c686 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-dark-colorblind-linux.png
index 6b6c693667c..4adbcaec3f6 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-dark-dimmed-linux.png
index 4fb4f267546..f8dd68d36b7 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-dark-high-contrast-linux.png
index aebe0f9fcc6..8573decbf32 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-dark-linux.png
index 6b6c693667c..4adbcaec3f6 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-dark-tritanopia-linux.png
index 6b6c693667c..4adbcaec3f6 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-light-colorblind-linux.png
index 6c68fb0861b..df418e1287e 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-light-high-contrast-linux.png
index 966331ec746..c248ed1477b 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-light-linux.png
index 6c68fb0861b..df418e1287e 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-light-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-light-tritanopia-linux.png
index 6c68fb0861b..df418e1287e 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-dark-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-dark-colorblind-linux.png
index 433609dca4d..6a55bdbc3da 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-dark-colorblind-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-dark-dimmed-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-dark-dimmed-linux.png
index 120aa345f9f..586cb674645 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-dark-dimmed-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-dark-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-dark-high-contrast-linux.png
index ff5034030b4..b14da3e70a9 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-dark-high-contrast-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-dark-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-dark-linux.png
index 1c46911a8b7..826dcbe317c 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-dark-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-dark-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-dark-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-dark-tritanopia-linux.png
index 1c46911a8b7..826dcbe317c 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-dark-tritanopia-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-light-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-light-colorblind-linux.png
index 4308eaffc14..793470f7336 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-light-colorblind-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-light-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-light-high-contrast-linux.png
index fea7b78c2ab..15f9ce580a9 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-light-high-contrast-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-light-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-light-linux.png
index b784eb66ff2..e5b2cd2c3c1 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-light-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-light-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-light-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-light-tritanopia-linux.png
index b784eb66ff2..e5b2cd2c3c1 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-light-tritanopia-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Danger-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-dark-colorblind-linux.png
index f7c84f36e51..bfb639b452a 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-dark-colorblind-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-dark-dimmed-linux.png
index 4b37bcd228c..ff04b3df460 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-dark-dimmed-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-dark-high-contrast-linux.png
index d1a17b9413e..cddbb49a1e7 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-dark-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-dark-linux.png
index f7c84f36e51..bfb639b452a 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-dark-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-dark-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-dark-tritanopia-linux.png
index f7c84f36e51..bfb639b452a 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-dark-tritanopia-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-light-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-light-colorblind-linux.png
index 4f122c9dc18..3bff066a6e6 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-light-colorblind-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-light-high-contrast-linux.png
index 5e39ccd261b..19e532ea5a5 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-light-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-light-linux.png
index 4f122c9dc18..3bff066a6e6 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-light-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-light-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-light-tritanopia-linux.png
index 4f122c9dc18..3bff066a6e6 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-light-tritanopia-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Default-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Disabled-dark-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Disabled-dark-high-contrast-linux.png
index 21a7ebe4abb..7f72da8c56b 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Disabled-dark-high-contrast-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Disabled-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Disabled-light-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Disabled-light-colorblind-linux.png
index 4effbfa23a5..984abb1ac67 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Disabled-light-colorblind-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Disabled-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Disabled-light-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Disabled-light-high-contrast-linux.png
index 1a3cceaa3bf..4f2b362c34e 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Disabled-light-high-contrast-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Disabled-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Disabled-light-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Disabled-light-linux.png
index 4effbfa23a5..984abb1ac67 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Disabled-light-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Disabled-light-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Disabled-light-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Disabled-light-tritanopia-linux.png
index 4effbfa23a5..984abb1ac67 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Disabled-light-tritanopia-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Disabled-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-dark-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-dark-high-contrast-linux.png
index 60c491f81b7..3c89e9aac8d 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-dark-high-contrast-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-light-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-light-colorblind-linux.png
index 6f38300c227..97c5f0ea65a 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-light-colorblind-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-light-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-light-high-contrast-linux.png
index 88d04cb1f5b..ec2a1049610 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-light-high-contrast-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-light-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-light-linux.png
index 6f38300c227..97c5f0ea65a 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-light-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-light-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-light-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-light-tritanopia-linux.png
index 6f38300c227..97c5f0ea65a 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-light-tritanopia-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Invisible-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-dark-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-dark-colorblind-linux.png
index 98c36810154..9e92cd80071 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-dark-colorblind-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-dark-dimmed-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-dark-dimmed-linux.png
index fa494b8694f..503daaa904a 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-dark-dimmed-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-dark-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-dark-high-contrast-linux.png
index 77d4d3b0e1c..4c310c1aaf6 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-dark-high-contrast-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-dark-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-dark-linux.png
index 98c36810154..9e92cd80071 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-dark-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-dark-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-dark-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-dark-tritanopia-linux.png
index 98c36810154..9e92cd80071 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-dark-tritanopia-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-light-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-light-colorblind-linux.png
index 7def6954541..b3a1d296bc9 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-light-colorblind-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-light-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-light-high-contrast-linux.png
index 704b01b094d..cb1306297ef 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-light-high-contrast-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-light-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-light-linux.png
index 7def6954541..b3a1d296bc9 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-light-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-light-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-light-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-light-tritanopia-linux.png
index 7def6954541..b3a1d296bc9 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-light-tritanopia-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Large-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-dark-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-dark-colorblind-linux.png
index f7c84f36e51..bfb639b452a 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-dark-colorblind-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-dark-dimmed-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-dark-dimmed-linux.png
index 4b37bcd228c..ff04b3df460 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-dark-dimmed-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-dark-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-dark-high-contrast-linux.png
index d1a17b9413e..cddbb49a1e7 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-dark-high-contrast-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-dark-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-dark-linux.png
index f7c84f36e51..bfb639b452a 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-dark-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-dark-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-dark-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-dark-tritanopia-linux.png
index f7c84f36e51..bfb639b452a 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-dark-tritanopia-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-light-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-light-colorblind-linux.png
index 4f122c9dc18..3bff066a6e6 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-light-colorblind-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-light-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-light-high-contrast-linux.png
index 5e39ccd261b..19e532ea5a5 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-light-high-contrast-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-light-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-light-linux.png
index 4f122c9dc18..3bff066a6e6 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-light-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-light-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-light-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-light-tritanopia-linux.png
index 4f122c9dc18..3bff066a6e6 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-light-tritanopia-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Medium-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-colorblind-linux.png
index 731730d9667..678cdcf2d27 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-colorblind-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-dimmed-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-dimmed-linux.png
index 254594eaadd..79c93e143b8 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-dimmed-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-high-contrast-linux.png
index b000d2bc440..4250d1c091a 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-high-contrast-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-linux.png
index 731730d9667..678cdcf2d27 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-tritanopia-linux.png
index 731730d9667..678cdcf2d27 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-tritanopia-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-colorblind-linux.png
index 84d98d97639..8eb9badcadc 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-colorblind-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-high-contrast-linux.png
index c77dcec1007..23381372f26 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-high-contrast-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-linux.png
index 84d98d97639..8eb9badcadc 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-tritanopia-linux.png
index 84d98d97639..8eb9badcadc 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-tritanopia-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-dark-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-dark-colorblind-linux.png
index 6d9dbbce002..dc3108c09ee 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-dark-colorblind-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-dark-dimmed-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-dark-dimmed-linux.png
index 66e90591a89..7c6b3814da3 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-dark-dimmed-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-dark-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-dark-high-contrast-linux.png
index 94d314ee459..d7ad996b931 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-dark-high-contrast-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-dark-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-dark-linux.png
index 61de8c65f7b..6fcf6cf59d2 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-dark-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-dark-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-dark-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-dark-tritanopia-linux.png
index 6d9dbbce002..dc3108c09ee 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-dark-tritanopia-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-light-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-light-colorblind-linux.png
index 8c49c3fb0c8..3130880f414 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-light-colorblind-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-light-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-light-high-contrast-linux.png
index 85322075097..c5fc4c3b9ef 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-light-high-contrast-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-light-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-light-linux.png
index 765bdc62f5d..99ea9dbbc7b 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-light-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-light-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-light-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-light-tritanopia-linux.png
index 8c49c3fb0c8..3130880f414 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-light-tritanopia-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Primary-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-dark-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-dark-colorblind-linux.png
index f5a41634dfc..2df76363b9e 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-dark-colorblind-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-dark-dimmed-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-dark-dimmed-linux.png
index 19edd517990..30fd2166025 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-dark-dimmed-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-dark-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-dark-high-contrast-linux.png
index 112344da934..d9ec0633683 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-dark-high-contrast-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-dark-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-dark-linux.png
index f5a41634dfc..2df76363b9e 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-dark-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-dark-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-dark-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-dark-tritanopia-linux.png
index f5a41634dfc..2df76363b9e 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-dark-tritanopia-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-light-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-light-colorblind-linux.png
index 503dd559d71..8fd56f3cd51 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-light-colorblind-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-light-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-light-high-contrast-linux.png
index d73e0b30b8a..037a71cdda5 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-light-high-contrast-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-light-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-light-linux.png
index 503dd559d71..8fd56f3cd51 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-light-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-light-linux.png differ
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-light-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-light-tritanopia-linux.png
index 503dd559d71..8fd56f3cd51 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-light-tritanopia-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Small-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-dark-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-dark-colorblind-linux.png
index 8e9a8cefb04..96fa576cb44 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-dark-colorblind-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-dark-dimmed-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-dark-dimmed-linux.png
index 6efca82d383..95fc456b5a1 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-dark-dimmed-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-dark-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-dark-high-contrast-linux.png
index cc36b544690..023f76c77f7 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-dark-high-contrast-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-dark-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-dark-linux.png
index 5540f5e343c..83a20efc55d 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-dark-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-dark-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-dark-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-dark-tritanopia-linux.png
index 5540f5e343c..83a20efc55d 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-dark-tritanopia-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-light-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-light-colorblind-linux.png
index 2fd09ce5d84..0a0d7b132f4 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-light-colorblind-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-light-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-light-high-contrast-linux.png
index 7581948193a..dae7d216dbd 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-light-high-contrast-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-light-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-light-linux.png
index 19973323ad1..9e2ca27cf01 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-light-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-light-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-light-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-light-tritanopia-linux.png
index 19973323ad1..9e2ca27cf01 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-light-tritanopia-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Danger-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-dark-colorblind-linux.png
index dc5f0f4b5c1..e3d5a91a66b 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-dark-colorblind-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-dark-dimmed-linux.png
index e2d54cd3a16..56d48dbc00a 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-dark-dimmed-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-dark-high-contrast-linux.png
index a4038ddb289..857e7d3bc0c 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-dark-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-dark-linux.png
index dc5f0f4b5c1..e3d5a91a66b 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-dark-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-dark-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-dark-tritanopia-linux.png
index dc5f0f4b5c1..e3d5a91a66b 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-dark-tritanopia-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-light-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-light-colorblind-linux.png
index 4137438612b..5762cf818cd 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-light-colorblind-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-light-high-contrast-linux.png
index dbf94992df7..cd7ea93d91a 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-light-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-light-linux.png
index 4137438612b..5762cf818cd 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-light-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-light-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-light-tritanopia-linux.png
index 4137438612b..5762cf818cd 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-light-tritanopia-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Default-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-dark-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-dark-colorblind-linux.png
index 96491afdfc6..3eeceac5f96 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-dark-colorblind-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-dark-dimmed-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-dark-dimmed-linux.png
index 1a11b62dbbe..4b7ff48113a 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-dark-dimmed-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-dark-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-dark-high-contrast-linux.png
index 36cf32ee771..ea3f43522f6 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-dark-high-contrast-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-dark-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-dark-linux.png
index 96491afdfc6..3eeceac5f96 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-dark-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-dark-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-dark-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-dark-tritanopia-linux.png
index 96491afdfc6..3eeceac5f96 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-dark-tritanopia-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-light-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-light-colorblind-linux.png
index 3011b428e1f..8ca573d8cb9 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-light-colorblind-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-light-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-light-high-contrast-linux.png
index d274a98d639..cadeebdeb0a 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-light-high-contrast-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-light-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-light-linux.png
index 3011b428e1f..8ca573d8cb9 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-light-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-light-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-light-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-light-tritanopia-linux.png
index 3011b428e1f..8ca573d8cb9 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-light-tritanopia-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Invisible-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-dark-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-dark-colorblind-linux.png
index da4f705945e..afd7b05b4c9 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-dark-colorblind-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-dark-dimmed-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-dark-dimmed-linux.png
index 15651ab92f0..d35df7a4ec0 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-dark-dimmed-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-dark-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-dark-high-contrast-linux.png
index 60370b7d94c..3eba9aac4ad 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-dark-high-contrast-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-dark-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-dark-linux.png
index da4f705945e..afd7b05b4c9 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-dark-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-dark-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-dark-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-dark-tritanopia-linux.png
index da4f705945e..afd7b05b4c9 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-dark-tritanopia-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-light-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-light-colorblind-linux.png
index 7dee981476c..3a8fb2fe2f0 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-light-colorblind-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-light-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-light-high-contrast-linux.png
index ccffbdd3377..884474df496 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-light-high-contrast-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-light-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-light-linux.png
index 7dee981476c..3a8fb2fe2f0 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-light-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-light-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-light-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-light-tritanopia-linux.png
index 7dee981476c..3a8fb2fe2f0 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-light-tritanopia-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Large-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-dark-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-dark-colorblind-linux.png
index 974631b9b5e..36d2a45986e 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-dark-colorblind-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-dark-dimmed-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-dark-dimmed-linux.png
index 5cec6060501..6af5e736bb0 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-dark-dimmed-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-dark-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-dark-high-contrast-linux.png
index 434329e791a..9c595667f02 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-dark-high-contrast-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-dark-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-dark-linux.png
index 974631b9b5e..36d2a45986e 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-dark-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-dark-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-dark-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-dark-tritanopia-linux.png
index 974631b9b5e..36d2a45986e 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-dark-tritanopia-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-light-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-light-colorblind-linux.png
index 7f23cee775f..d45c0170307 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-light-colorblind-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-light-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-light-high-contrast-linux.png
index 7a23732c0d9..b533d6b9181 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-light-high-contrast-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-light-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-light-linux.png
index 7f23cee775f..d45c0170307 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-light-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-light-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-light-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-light-tritanopia-linux.png
index 7f23cee775f..d45c0170307 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-light-tritanopia-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-dark-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-dark-colorblind-linux.png
index dc5f0f4b5c1..e3d5a91a66b 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-dark-colorblind-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-dark-dimmed-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-dark-dimmed-linux.png
index e2d54cd3a16..56d48dbc00a 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-dark-dimmed-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-dark-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-dark-high-contrast-linux.png
index a4038ddb289..857e7d3bc0c 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-dark-high-contrast-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-dark-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-dark-linux.png
index dc5f0f4b5c1..e3d5a91a66b 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-dark-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-dark-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-dark-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-dark-tritanopia-linux.png
index dc5f0f4b5c1..e3d5a91a66b 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-dark-tritanopia-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-light-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-light-colorblind-linux.png
index 4137438612b..5762cf818cd 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-light-colorblind-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-light-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-light-high-contrast-linux.png
index dbf94992df7..cd7ea93d91a 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-light-high-contrast-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-light-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-light-linux.png
index 4137438612b..5762cf818cd 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-light-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-light-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-light-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-light-tritanopia-linux.png
index 4137438612b..5762cf818cd 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-light-tritanopia-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Medium-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-colorblind-linux.png
index f66a1116f15..4dd3808cfe2 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-colorblind-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-dimmed-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-dimmed-linux.png
index bcb806c2680..056b04be74c 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-dimmed-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-high-contrast-linux.png
index 34917cad01b..3e52d73fc21 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-high-contrast-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-linux.png
index f66a1116f15..4dd3808cfe2 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-tritanopia-linux.png
index f66a1116f15..4dd3808cfe2 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-tritanopia-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-colorblind-linux.png
index 763dfe08f8a..b1e5d41ff7f 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-colorblind-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-high-contrast-linux.png
index 1405af83ae1..59b74e43734 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-high-contrast-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-linux.png
index 763dfe08f8a..b1e5d41ff7f 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-tritanopia-linux.png
index 763dfe08f8a..b1e5d41ff7f 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-tritanopia-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-dark-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-dark-colorblind-linux.png
index dc5f0f4b5c1..e3d5a91a66b 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-dark-colorblind-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-dark-dimmed-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-dark-dimmed-linux.png
index e2d54cd3a16..56d48dbc00a 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-dark-dimmed-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-dark-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-dark-high-contrast-linux.png
index a4038ddb289..857e7d3bc0c 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-dark-high-contrast-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-dark-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-dark-linux.png
index dc5f0f4b5c1..e3d5a91a66b 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-dark-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-dark-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-dark-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-dark-tritanopia-linux.png
index dc5f0f4b5c1..e3d5a91a66b 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-dark-tritanopia-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-light-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-light-colorblind-linux.png
index 4137438612b..5762cf818cd 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-light-colorblind-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-light-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-light-high-contrast-linux.png
index dbf94992df7..cd7ea93d91a 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-light-high-contrast-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-light-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-light-linux.png
index 4137438612b..5762cf818cd 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-light-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-light-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-light-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-light-tritanopia-linux.png
index 4137438612b..5762cf818cd 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-light-tritanopia-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Playground-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-dark-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-dark-colorblind-linux.png
index c60fd519a38..dc4d05ce9d9 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-dark-colorblind-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-dark-dimmed-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-dark-dimmed-linux.png
index de981c90608..6c6ae9fa1db 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-dark-dimmed-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-dark-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-dark-high-contrast-linux.png
index 8ecb03ad3fd..5244e303e67 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-dark-high-contrast-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-dark-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-dark-linux.png
index d808eb30ff6..3d0da735bb5 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-dark-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-dark-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-dark-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-dark-tritanopia-linux.png
index c60fd519a38..dc4d05ce9d9 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-dark-tritanopia-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-light-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-light-colorblind-linux.png
index ea5c6a07b7d..74e72ecb972 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-light-colorblind-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-light-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-light-high-contrast-linux.png
index 1425e9c6731..cf8968e0ee4 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-light-high-contrast-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-light-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-light-linux.png
index cfdf0ab0ac5..9687ccc31e3 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-light-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-light-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-light-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-light-tritanopia-linux.png
index ea5c6a07b7d..74e72ecb972 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-light-tritanopia-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Primary-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-dark-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-dark-colorblind-linux.png
index c4463f73bd5..aff81a49101 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-dark-colorblind-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-dark-dimmed-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-dark-dimmed-linux.png
index 18b733da11d..98b02c72117 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-dark-dimmed-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-dark-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-dark-high-contrast-linux.png
index 809ff437833..ecd451e4315 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-dark-high-contrast-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-dark-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-dark-linux.png
index c4463f73bd5..aff81a49101 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-dark-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-dark-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-dark-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-dark-tritanopia-linux.png
index c4463f73bd5..aff81a49101 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-dark-tritanopia-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-light-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-light-colorblind-linux.png
index c7a6150491a..c8f16253757 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-light-colorblind-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-light-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-light-high-contrast-linux.png
index f83e48065e0..ac720db602f 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-light-high-contrast-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-light-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-light-linux.png
index c7a6150491a..c8f16253757 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-light-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-light-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-light-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-light-tritanopia-linux.png
index c7a6150491a..c8f16253757 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-light-tritanopia-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Small-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-colorblind-linux.png
index 4c994c27c07..4adbcaec3f6 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-colorblind-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-dimmed-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-dimmed-linux.png
index 5b32af2a158..f8dd68d36b7 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-dimmed-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-high-contrast-linux.png
index f156322a80a..8573decbf32 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-high-contrast-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-linux.png
index 4c994c27c07..4adbcaec3f6 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-tritanopia-linux.png
index 4c994c27c07..4adbcaec3f6 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-tritanopia-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-light-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-light-colorblind-linux.png
index 1a852ff0d7a..df418e1287e 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-light-colorblind-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-light-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-light-high-contrast-linux.png
index 5b15b2b0d93..c248ed1477b 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-light-high-contrast-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-light-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-light-linux.png
index 1a852ff0d7a..df418e1287e 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-light-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-light-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-light-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-light-tritanopia-linux.png
index 1a852ff0d7a..df418e1287e 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-light-tritanopia-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-dark-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-dark-colorblind-linux.png
index dc5f0f4b5c1..e3d5a91a66b 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-dark-colorblind-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-dark-dimmed-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-dark-dimmed-linux.png
index e2d54cd3a16..56d48dbc00a 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-dark-dimmed-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-dark-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-dark-high-contrast-linux.png
index a4038ddb289..857e7d3bc0c 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-dark-high-contrast-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-dark-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-dark-linux.png
index dc5f0f4b5c1..e3d5a91a66b 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-dark-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-dark-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-dark-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-dark-tritanopia-linux.png
index dc5f0f4b5c1..e3d5a91a66b 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-dark-tritanopia-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-light-colorblind-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-light-colorblind-linux.png
index 4137438612b..5762cf818cd 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-light-colorblind-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-light-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-light-high-contrast-linux.png
index dbf94992df7..cd7ea93d91a 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-light-high-contrast-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-light-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-light-linux.png
index 4137438612b..5762cf818cd 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-light-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-light-linux.png differ
diff --git a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-light-tritanopia-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-light-tritanopia-linux.png
index 4137438612b..5762cf818cd 100644
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-light-tritanopia-linux.png and b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-With-React-Router-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-high-contrast-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-high-contrast-linux.png
index 2dbd55be066..fe4babaf36d 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-light-high-contrast-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-light-high-contrast-linux.png
index 612972bcfd7..c3eebcd09e6 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-light-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-colorblind-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-colorblind-linux.png
index a0899f256c3..1b04f4b750e 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-colorblind-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-dimmed-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-dimmed-linux.png
index 87936c9e212..713085e0ae8 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-dimmed-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-high-contrast-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-high-contrast-linux.png
index dd011c9b818..6a6a04d8fc2 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-linux.png
index a0899f256c3..1b04f4b750e 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-tritanopia-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-tritanopia-linux.png
index a0899f256c3..1b04f4b750e 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-colorblind-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-colorblind-linux.png
index 40e44cfe085..6ffd0a09d01 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-colorblind-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-high-contrast-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-high-contrast-linux.png
index bf0d04fba77..f64922f43f8 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-linux.png
index 40e44cfe085..6ffd0a09d01 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-tritanopia-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-tritanopia-linux.png
index 40e44cfe085..6ffd0a09d01 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Hi-43cdc-t-enough-space-to-display-all-list-items-vrt-2-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Hi-43cdc-t-enough-space-to-display-all-list-items-vrt-2-linux.png
index 99adb621861..7df03986bbe 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Hi-43cdc-t-enough-space-to-display-all-list-items-vrt-2-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Hi-43cdc-t-enough-space-to-display-all-list-items-vrt-2-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Overflow-interaction-vrt-3-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Overflow-interaction-vrt-3-linux.png
index 7a5695f65fc..c45de5ea27d 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Overflow-interaction-vrt-3-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Overflow-interaction-vrt-3-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-colorblind-Overflow-interaction-vrt-3-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-colorblind-Overflow-interaction-vrt-3-linux.png
index 7a5695f65fc..2ea0fdd8465 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-colorblind-Overflow-interaction-vrt-3-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-colorblind-Overflow-interaction-vrt-3-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-3-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-3-linux.png
index 0d30cb2455b..c1ee05c3e13 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-3-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-3-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Keep-selected-item-visible-vrt-1-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Keep-selected-item-visible-vrt-1-linux.png
index b05d7be0699..8a3d5396e58 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Keep-selected-item-visible-vrt-1-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Keep-selected-item-visible-vrt-1-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Keep-selected-item-visible-vrt-3-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Keep-selected-item-visible-vrt-3-linux.png
index c19932ffbe5..b7c8b739818 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Keep-selected-item-visible-vrt-3-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Keep-selected-item-visible-vrt-3-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Keep-selected-item-visible-vrt-4-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Keep-selected-item-visible-vrt-4-linux.png
index a6abc7d73cf..69e89eef9c2 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Keep-selected-item-visible-vrt-4-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Keep-selected-item-visible-vrt-4-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-2-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-2-linux.png
index 18891d17052..9d6830a58e1 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-2-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-2-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-3-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-3-linux.png
index cb25a372cbd..35e33183a50 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-3-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-3-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-4-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-4-linux.png
index ef54d8ee225..d1f6497f0d1 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-4-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-4-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-3-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-3-linux.png
index 7a5695f65fc..6ca21054cb2 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-3-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-3-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-Overflow-interaction-vrt-3-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-Overflow-interaction-vrt-3-linux.png
index 646bec8d776..0be8075211d 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-Overflow-interaction-vrt-3-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-Overflow-interaction-vrt-3-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-colorblind-Overflow-interaction-vrt-3-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-colorblind-Overflow-interaction-vrt-3-linux.png
index 646bec8d776..e4e434d17b5 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-colorblind-Overflow-interaction-vrt-3-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-colorblind-Overflow-interaction-vrt-3-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Keep-selected-item-visible-vrt-1-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Keep-selected-item-visible-vrt-1-linux.png
index 14cf29c0214..e0703212e55 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Keep-selected-item-visible-vrt-1-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Keep-selected-item-visible-vrt-1-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Keep-selected-item-visible-vrt-3-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Keep-selected-item-visible-vrt-3-linux.png
index 9372090f7a8..be6e01e8e8f 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Keep-selected-item-visible-vrt-3-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Keep-selected-item-visible-vrt-3-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Keep-selected-item-visible-vrt-4-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Keep-selected-item-visible-vrt-4-linux.png
index af17ce14181..663d4febe9d 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Keep-selected-item-visible-vrt-4-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Keep-selected-item-visible-vrt-4-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Overflow-interaction-vrt-2-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Overflow-interaction-vrt-2-linux.png
index 347c2c10024..efb7d40c768 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Overflow-interaction-vrt-2-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Overflow-interaction-vrt-2-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Overflow-interaction-vrt-3-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Overflow-interaction-vrt-3-linux.png
index de91d38c848..51b1cd2fada 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Overflow-interaction-vrt-3-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Overflow-interaction-vrt-3-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Overflow-interaction-vrt-4-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Overflow-interaction-vrt-4-linux.png
index 263922bc795..6eff9873b45 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Overflow-interaction-vrt-4-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Overflow-interaction-vrt-4-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-3-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-3-linux.png
index 646bec8d776..e4e434d17b5 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-3-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-3-linux.png differ
diff --git a/docs/content/AnchoredOverlay.mdx b/docs/content/AnchoredOverlay.mdx
index 807fef7176b..38317f96fe8 100644
--- a/docs/content/AnchoredOverlay.mdx
+++ b/docs/content/AnchoredOverlay.mdx
@@ -23,7 +23,7 @@ See also [Overlay positioning](/Overlay#positioning).
     return (
       <AnchoredOverlay
         renderAnchor={anchorProps => (
-          <Button {...anchorProps} trailingIcon={TriangleDownIcon}>
+          <Button {...anchorProps} trailingAction={TriangleDownIcon}>
             Click me to open
           </Button>
         )}
diff --git a/docs/content/Button.mdx b/docs/content/Button.mdx
index 3c62d7dac14..f0607d1f2dd 100644
--- a/docs/content/Button.mdx
+++ b/docs/content/Button.mdx
@@ -111,13 +111,12 @@ The counter will match the `variant` styles of the parent button.
 </Button>
 ```
 
-### Styling a button
+### Block button
 
-A button can be styled in an appropriate manner using the `sx` prop. This may be to change width, or to add margins etc.
-Here's an example of a block button which takes 100% of available width. Checkout [styled-system](https://styled-system.com/) to see what you can send in an `sx` prop.
+Use the `block` prop for full width buttons.
 
 ```jsx live
-<Button sx={{width: '100%'}}>Block</Button>
+<Button block>Block</Button>
 ```
 
 ## Props
diff --git a/docs/content/SelectPanel.mdx b/docs/content/SelectPanel.mdx
index d7cdb2d3338..0134547dccc 100644
--- a/docs/content/SelectPanel.mdx
+++ b/docs/content/SelectPanel.mdx
@@ -47,7 +47,7 @@ function DemoComponent() {
   return (
     <SelectPanel
       renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-        <Button trailingIcon={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+        <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
           {children || 'Select Labels'}
         </Button>
       )}
diff --git a/src/ActionMenu.tsx b/src/ActionMenu.tsx
index f73caed7493..bcf1179eb87 100644
--- a/src/ActionMenu.tsx
+++ b/src/ActionMenu.tsx
@@ -9,7 +9,6 @@ import {Button, ButtonProps} from './Button'
 import {useId} from './hooks/useId'
 import {MandateProps} from './utils/types'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from './utils/polymorphic'
-import {merge, BetterSystemStyleObject} from './sx'
 
 export type MenuContextProps = Pick<
   AnchoredOverlayProps,
@@ -75,21 +74,10 @@ const Anchor = React.forwardRef<HTMLElement, ActionMenuAnchorProps>(({children,
 
 /** this component is syntactical sugar 🍭 */
 export type ActionMenuButtonProps = ButtonProps
-const MenuButton = React.forwardRef(({sx: sxProp = {}, ...props}, anchorRef) => {
+const MenuButton = React.forwardRef(({...props}, anchorRef) => {
   return (
     <Anchor ref={anchorRef}>
-      <Button
-        type="button"
-        trailingIcon={TriangleDownIcon}
-        sx={merge<BetterSystemStyleObject>(
-          {
-            // override the margin on caret for optical alignment
-            '[data-component=trailingIcon]': {marginX: -1},
-          },
-          sxProp,
-        )}
-        {...props}
-      />
+      <Button type="button" trailingAction={TriangleDownIcon} {...props} />
     </Anchor>
   )
 }) as PolymorphicForwardRefComponent<'button', ActionMenuButtonProps>
diff --git a/src/Button/Button.dev.stories.tsx b/src/Button/Button.dev.stories.tsx
new file mode 100644
index 00000000000..a4e3dee364f
--- /dev/null
+++ b/src/Button/Button.dev.stories.tsx
@@ -0,0 +1,89 @@
+import {SearchIcon, TriangleDownIcon, EyeIcon} from '@primer/octicons-react'
+import React from 'react'
+import {Button} from '.'
+
+export default {
+  title: 'Components/Button/DevOnly',
+}
+
+export const InvisibleVariants = () => {
+  const count = 4
+  return (
+    <div style={{display: 'flex', flexDirection: 'row', gap: '1rem'}}>
+      <Button variant="invisible">Button</Button>
+      <Button variant="invisible" leadingIcon={SearchIcon}>
+        Button
+      </Button>
+      <Button variant="invisible" trailingAction={TriangleDownIcon}>
+        Button
+      </Button>
+      <Button variant="primary">
+        Button
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
+      <Button variant="invisible" leadingIcon={EyeIcon}>
+        Button
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
+      <Button variant="invisible" leadingIcon={EyeIcon} trailingAction={TriangleDownIcon}>
+        Button
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
+    </div>
+  )
+}
+
+export const TestSxProp = () => {
+  const count = 4
+  return (
+    <div style={{display: 'flex', flexDirection: 'row', gap: '1rem'}}>
+      <Button
+        size="small"
+        sx={{
+          ':hover': {
+            color: 'deepskyblue',
+          },
+          [`@media screen and (max-width: 768px)`]: {
+            color: 'salmon',
+          },
+          '@media screen and (min-width: 768px)': {
+            ':focus': {
+              color: 'green',
+            },
+          },
+          '@media (min-width: 1440)': {
+            color: 'deeppink',
+          },
+        }}
+      >
+        Pink
+      </Button>
+      <Button leadingIcon={SearchIcon} variant="invisible" sx={{color: 'deeppink'}}>
+        Pink
+      </Button>
+      <Button
+        size="small"
+        variant="invisible"
+        sx={{
+          width: 32,
+          height: 32,
+          '&:focus': {
+            outline: 0,
+            '& > span': {
+              boxShadow: `inset 0 0 0 2px deeppink`,
+            },
+          },
+        }}
+      >
+        Custom size
+      </Button>
+      <Button size="small" block variant="invisible" sx={{width: 320}}>
+        Overriden Block
+      </Button>
+      <Button>
+        Watch
+        <Button.Counter sx={{fontSize: 32}}>{count}</Button.Counter>
+      </Button>
+    </div>
+  )
+}
diff --git a/src/Button/Button.features.stories.tsx b/src/Button/Button.features.stories.tsx
index efc09fccd92..9689b6aa3a0 100644
--- a/src/Button/Button.features.stories.tsx
+++ b/src/Button/Button.features.stories.tsx
@@ -1,4 +1,4 @@
-import {EyeIcon, HeartIcon} from '@primer/octicons-react'
+import {EyeIcon, TriangleDownIcon, HeartIcon} from '@primer/octicons-react'
 import React, {useState} from 'react'
 import {Button} from '.'
 
@@ -28,6 +28,10 @@ export const TrailingCounter = () => {
   )
 }
 
+export const TrailingAction = () => <Button trailingAction={TriangleDownIcon}>Trailing action</Button>
+
+export const Block = () => <Button block>Default</Button>
+
 export const Disabled = () => <Button disabled>Default</Button>
 
 export const Small = () => <Button size="small">Default</Button>
diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx
index fdea81861c0..898e6b6489d 100644
--- a/src/Button/Button.stories.tsx
+++ b/src/Button/Button.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon} from '@primer/octicons-react'
+import {EyeClosedIcon, EyeIcon, SearchIcon, TriangleDownIcon, XIcon, HeartIcon} from '@primer/octicons-react'
 import {Story, Meta} from '@storybook/react'
 import {Button} from '.'
 import {OcticonArgType} from '../utils/story-helpers'
@@ -21,18 +21,39 @@ export default {
     variant: {
       control: {
         type: 'radio',
-        options: ['default', 'primary', 'danger', 'invisible', 'outline'],
+        options: ['default', 'primary', 'danger', 'invisible'],
+      },
+    },
+    alignContent: {
+      control: {
+        type: 'radio',
+        options: ['center', 'start'],
+      },
+    },
+    block: {
+      control: {
+        type: 'boolean',
       },
     },
     leadingIcon: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]),
     trailingIcon: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]),
+    trailingAction: OcticonArgType([TriangleDownIcon]),
+    trailingVisualCount: {
+      control: {
+        type: 'number',
+      },
+    },
   },
   args: {
+    block: false,
     size: 'medium',
     disabled: false,
     variant: 'default',
+    alignContent: 'center',
     trailingIcon: null,
     leadingIcon: null,
+    trailingAction: null,
+    trailingVisualCount: undefined,
   },
 } as Meta<typeof Button>
 
diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
index 2a34640b6e0..a2cc813061f 100644
--- a/src/Button/Button.tsx
+++ b/src/Button/Button.tsx
@@ -2,15 +2,89 @@ import React, {forwardRef} from 'react'
 import {ButtonProps} from './types'
 import {ButtonBase} from './ButtonBase'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
+import {defaultSxProp} from '../utils/defaultSxProp'
+import {BetterSystemStyleObject} from '../sx'
+
+const ButtonComponent = forwardRef(({children, sx: sxProp = defaultSxProp, ...props}, forwardedRef): JSX.Element => {
+  let sxStyles = sxProp
+
+  // grap the button props that have associated data attributes in the styles
+  const {block, size, leadingIcon, trailingIcon, trailingAction} = props
+
+  if (sxProp !== null && Object.keys(sxProp).length > 0) {
+    sxStyles = generateCustomSxProp({block, size, leadingIcon, trailingIcon, trailingAction}, sxProp)
+  }
 
-const ButtonComponent = forwardRef(({children, ...props}, forwardedRef): JSX.Element => {
   return (
-    <ButtonBase ref={forwardedRef} as="button" type="button" {...props}>
+    <ButtonBase ref={forwardedRef} as="button" sx={sxStyles} type="button" {...props}>
       {children}
     </ButtonBase>
   )
 }) as PolymorphicForwardRefComponent<'button', ButtonProps>
 
+// This function is used to generate a custom cssSelector for the sxProp
+
+// The usual sx prop can like this:
+// sx={{
+//   [`@media (max-width: 768px)`]: {
+//     '& > ul': {
+//       backgroundColor: 'deeppink',
+//     },
+//     '&:hover': {
+//       backgroundColor: 'yellow',
+//     },
+//   },
+//  '&:hover': {
+//     backgroundColor: 'yellow',
+//   },
+//  '&': {
+//  width : 320px
+// }
+// }}
+//*
+/* What we want for Button styles is this:
+sx={{
+//   [`@media (max-width: 768px)`]: {
+//     '&[data-attribute="something"] > ul': {
+//       backgroundColor: 'deeppink',
+//     },
+//     '&[data-attribute="something"]:hover': {
+//       backgroundColor: 'yellow',
+//     },
+//   },
+//  '&[data-attribute="something"]:hover': {
+//     backgroundColor: 'yellow',
+//   },
+//  '&[data-attribute="something"]': {
+//     width : 320px
+//  }
+// }}
+
+// We need to make sure we append the customCSSSelector to the original class selector. i.e & - > &[data-attribute="Icon"][data-size="small"]
+*/
+export function generateCustomSxProp(
+  props: Partial<Pick<ButtonProps, 'size' | 'block' | 'leadingIcon' | 'trailingIcon' | 'trailingAction'>>,
+  providedSx: BetterSystemStyleObject,
+) {
+  // Possible data attributes: data-size, data-block, data-no-visuals
+  const size = props.size ? `[data-size="${props.size}"]` : ''
+  const block = props.block ? `[data-block="block"]` : ''
+  const noVisuals = props.leadingIcon || props.trailingIcon || props.trailingAction ? '' : '[data-no-visuals="true"]'
+
+  // this is custom selector. We need to make sure we add the data attributes to the base css class (& -> &[data-attributename="value"]])
+  const cssSelector = `&${size}${block}${noVisuals}` // &[data-size="small"][data-block="block"][data-no-visuals="true"]
+
+  const customSxProp: {
+    [key: string]: BetterSystemStyleObject
+  } = {}
+
+  if (!providedSx) return customSxProp
+  else {
+    customSxProp[cssSelector] = providedSx
+    return customSxProp
+  }
+}
+
 ButtonComponent.displayName = 'Button'
 
 export {ButtonComponent}
diff --git a/src/Button/ButtonBase.tsx b/src/Button/ButtonBase.tsx
index aeaaefd26f1..18e38f40df8 100644
--- a/src/Button/ButtonBase.tsx
+++ b/src/Button/ButtonBase.tsx
@@ -4,31 +4,38 @@ import Box from '../Box'
 import {BetterSystemStyleObject, merge} from '../sx'
 import {useTheme} from '../ThemeProvider'
 import {ButtonProps, StyledButton} from './types'
-import {getVariantStyles, getSizeStyles, getButtonStyles} from './styles'
+import {getVariantStyles, getButtonStyles, getAlignContentSize} from './styles'
 import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
 import {defaultSxProp} from '../utils/defaultSxProp'
 
-const iconWrapStyles = {
-  display: 'inline-block',
-}
-const trailingIconStyles = {
-  ...iconWrapStyles,
-  ml: 2,
-}
-
 const ButtonBase = forwardRef(
   ({children, as: Component = 'button', sx: sxProp = defaultSxProp, ...props}, forwardedRef): JSX.Element => {
-    const {leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, variant = 'default', size = 'medium', ...rest} = props
+    const {
+      leadingIcon: LeadingIcon,
+      trailingIcon: TrailingIcon,
+      trailingAction: TrailingAction,
+      icon: Icon,
+      variant = 'default',
+      size = 'medium',
+      alignContent = 'center',
+      block = false,
+      ...rest
+    } = props
+
     const innerRef = React.useRef<HTMLButtonElement>(null)
     useRefObjectAsForwardedRef(forwardedRef, innerRef)
 
     const {theme} = useTheme()
     const baseStyles = useMemo(() => {
-      return merge.all([getButtonStyles(theme), getSizeStyles(size, variant, false), getVariantStyles(variant, theme)])
-    }, [theme, size, variant])
+      return merge.all([getButtonStyles(theme), getVariantStyles(variant, theme)])
+    }, [theme, variant])
     const sxStyles = useMemo(() => {
       return merge<BetterSystemStyleObject>(baseStyles, sxProp)
     }, [baseStyles, sxProp])
+    const iconWrapStyles = {
+      display: 'flex',
+      pointerEvents: 'none',
+    }
 
     if (__DEV__) {
       /**
@@ -51,17 +58,38 @@ const ButtonBase = forwardRef(
     }
 
     return (
-      <StyledButton as={Component} sx={sxStyles} {...rest} ref={innerRef}>
-        {LeadingIcon && (
-          <Box as="span" data-component="leadingIcon" sx={iconWrapStyles}>
-            <LeadingIcon />
-          </Box>
-        )}
-        {children && <span data-component="text">{children}</span>}
-        {TrailingIcon && (
-          <Box as="span" data-component="trailingIcon" sx={trailingIconStyles}>
-            <TrailingIcon />
-          </Box>
+      <StyledButton
+        as={Component}
+        sx={sxStyles}
+        {...rest}
+        ref={innerRef}
+        data-block={block ? 'block' : null}
+        data-size={size === 'small' || size === 'large' ? size : undefined}
+        data-no-visuals={!LeadingIcon && !TrailingIcon && !TrailingAction ? true : undefined}
+      >
+        {Icon ? (
+          <Icon />
+        ) : (
+          <>
+            <Box as="span" data-component="buttonContent" sx={getAlignContentSize(alignContent)}>
+              {LeadingIcon && (
+                <Box as="span" data-component="leadingVisual" sx={{...iconWrapStyles}}>
+                  <LeadingIcon />
+                </Box>
+              )}
+              {children && <span data-component="text">{children}</span>}
+              {TrailingIcon && (
+                <Box as="span" data-component="trailingVisual" sx={{...iconWrapStyles}}>
+                  <TrailingIcon />
+                </Box>
+              )}
+            </Box>
+            {TrailingAction && (
+              <Box as="span" data-component="trailingAction" sx={{...iconWrapStyles}}>
+                <TrailingAction />
+              </Box>
+            )}
+          </>
         )}
       </StyledButton>
     )
diff --git a/src/Button/ButtonCounter.tsx b/src/Button/ButtonCounter.tsx
index 9afc381a6a8..24f43489423 100644
--- a/src/Button/ButtonCounter.tsx
+++ b/src/Button/ButtonCounter.tsx
@@ -8,8 +8,14 @@ export type CounterProps = {
 } & SxProp
 
 const Counter = ({children, sx: sxProp = defaultSxProp, ...props}: CounterProps) => {
+  // we need to make sure we add the sx styles to the css selector that has the highest specificity.
+  const cssSelector = `&[data-component="ButtonCounter"]`
+
+  const counterButtonStyles = {
+    [cssSelector]: sxProp,
+  }
   return (
-    <CounterLabel data-component="ButtonCounter" sx={{ml: 2, ...sxProp}} {...props}>
+    <CounterLabel data-component="ButtonCounter" sx={{ml: 2, ...counterButtonStyles}} {...props}>
       {children}
     </CounterLabel>
   )
diff --git a/src/Button/IconButton.dev.stories.tsx b/src/Button/IconButton.dev.stories.tsx
new file mode 100644
index 00000000000..ac583d84d48
--- /dev/null
+++ b/src/Button/IconButton.dev.stories.tsx
@@ -0,0 +1,23 @@
+import {ChevronDownIcon} from '@primer/octicons-react'
+import React from 'react'
+import {IconButton} from '.'
+
+export default {
+  title: 'Components/IconButton/DevOnly',
+}
+
+export const CustomSize = () => (
+  <IconButton aria-label="Expand" variant="primary" size="small" icon={ChevronDownIcon} sx={{width: 16, height: 16}} />
+)
+
+export const CustomSizeWithMedia = () => {
+  return (
+    <IconButton
+      aria-label="Expand"
+      variant="primary"
+      size="small"
+      icon={ChevronDownIcon}
+      sx={{'@media (min-width: 123px)': {width: 16, height: 16}}}
+    />
+  )
+}
diff --git a/src/Button/IconButton.tsx b/src/Button/IconButton.tsx
index ad4aef0c30f..4a76d45a19b 100644
--- a/src/Button/IconButton.tsx
+++ b/src/Button/IconButton.tsx
@@ -1,28 +1,22 @@
 import React, {forwardRef} from 'react'
-import {merge, BetterSystemStyleObject} from '../sx'
-import {useTheme} from '../ThemeProvider'
-import Box from '../Box'
-import {IconButtonProps, StyledButton} from './types'
-import {getBaseStyles, getSizeStyles, getVariantStyles} from './styles'
+import {IconButtonProps} from './types'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
+import {ButtonBase} from './ButtonBase'
 import {defaultSxProp} from '../utils/defaultSxProp'
+import {generateCustomSxProp} from './Button'
+
+const IconButton = forwardRef(({sx: sxProp = defaultSxProp, icon: Icon, ...props}, forwardedRef): JSX.Element => {
+  let sxStyles = sxProp
+  // grap the button props that have associated data attributes in the styles
+  const {size} = props
+
+  if (sxProp !== null && Object.keys(sxProp).length > 0) {
+    sxStyles = generateCustomSxProp({size}, sxProp)
+  }
 
-const IconButton = forwardRef((props, forwardedRef): JSX.Element => {
-  const {variant = 'default', size = 'medium', sx: sxProp = defaultSxProp, icon: Icon, ...rest} = props
-  const {theme} = useTheme()
-  const sxStyles = merge.all<BetterSystemStyleObject>([
-    getBaseStyles(theme),
-    getSizeStyles(size, variant, true),
-    getVariantStyles(variant, theme),
-    sxProp,
-  ])
   return (
     // @ts-expect-error StyledButton wants both Anchor and Button refs
-    <StyledButton sx={sxStyles} {...rest} ref={forwardedRef}>
-      <Box as="span" sx={{display: 'inline-block'}}>
-        <Icon />
-      </Box>
-    </StyledButton>
+    <ButtonBase icon={Icon} data-component="IconButton" sx={sxStyles} {...props} ref={forwardedRef} />
   )
 }) as PolymorphicForwardRefComponent<'button' | 'a', IconButtonProps>
 
diff --git a/src/Button/LinkButton.features.stories.tsx b/src/Button/LinkButton.features.stories.tsx
index 29339feddfb..310103e8462 100644
--- a/src/Button/LinkButton.features.stories.tsx
+++ b/src/Button/LinkButton.features.stories.tsx
@@ -1,4 +1,4 @@
-import {EyeIcon, HeartIcon} from '@primer/octicons-react'
+import {EyeIcon, ChevronRightIcon, HeartIcon} from '@primer/octicons-react'
 import React, {forwardRef} from 'react'
 import {Button} from '.'
 
@@ -42,6 +42,18 @@ export const TrailingVisual = () => (
   </Button>
 )
 
+export const TrailingAction = () => (
+  <Button as="a" href="/" trailingAction={ChevronRightIcon}>
+    Trailing action
+  </Button>
+)
+
+export const Block = () => (
+  <Button as="a" href="/" block>
+    Default
+  </Button>
+)
+
 export const Small = () => (
   <Button as="a" href="/" size="small">
     Default
diff --git a/src/Button/LinkButton.stories.tsx b/src/Button/LinkButton.stories.tsx
index 90ab3df02cf..0cb755566e6 100644
--- a/src/Button/LinkButton.stories.tsx
+++ b/src/Button/LinkButton.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon} from '@primer/octicons-react'
+import {EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon, ChevronRightIcon} from '@primer/octicons-react'
 import {Story, Meta} from '@storybook/react'
 import {Button} from '.'
 import {OcticonArgType} from '../utils/story-helpers'
@@ -19,13 +19,32 @@ export default {
         options: ['default', 'primary', 'danger', 'invisible', 'outline'],
       },
     },
+    alignContent: {
+      control: {
+        type: 'radio',
+        options: ['center', 'start'],
+      },
+    },
+    block: {
+      control: {
+        type: 'boolean',
+      },
+    },
     leadingIcon: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]),
     trailingIcon: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]),
+    trailingAction: OcticonArgType([ChevronRightIcon]),
+    trailingVisualCount: {
+      control: {
+        type: 'number',
+      },
+    },
     href: {control: 'text'},
   },
   args: {
+    block: false,
     size: 'medium',
     variant: 'default',
+    alignContent: 'center',
     trailingIcon: null,
     leadingIcon: null,
     href: '/',
diff --git a/src/Button/LinkButton.tsx b/src/Button/LinkButton.tsx
index 02fea83f269..7a2cf287fc3 100644
--- a/src/Button/LinkButton.tsx
+++ b/src/Button/LinkButton.tsx
@@ -1,5 +1,4 @@
 import React, {forwardRef} from 'react'
-import {BetterSystemStyleObject, merge} from '../sx'
 import {LinkButtonProps} from './types'
 import {ButtonBase, ButtonBaseProps} from './ButtonBase'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
@@ -9,26 +8,12 @@ type MyProps = LinkButtonProps & ButtonBaseProps
 
 const LinkButton = forwardRef(
   ({children, as: Component = 'a', sx = defaultSxProp, ...props}, forwardedRef): JSX.Element => {
-    const style = {
-      width: 'fit-content',
-      '&:hover:not([disabled])': {
-        textDecoration: 'underline',
-      },
-      // focus must come before :active so that the active box shadow overrides
-      '&:focus:not([disabled])': {
-        textDecoration: 'underline',
-      },
-      '&:active:not([disabled])': {
-        textDecoration: 'underline',
-      },
-    }
-    const sxStyle = merge.all<BetterSystemStyleObject>([style, sx])
     return (
       <ButtonBase
         as={Component}
         // @ts-expect-error ButtonBase wants both Anchor and Button refs
         ref={forwardedRef}
-        sx={sxStyle}
+        sx={sx}
         {...props}
       >
         {children}
diff --git a/src/Button/styles.ts b/src/Button/styles.ts
index 8603860dec5..605da445460 100644
--- a/src/Button/styles.ts
+++ b/src/Button/styles.ts
@@ -1,8 +1,6 @@
-import {VariantType} from './types'
+import {VariantType, AlignContent} from './types'
 import {Theme} from '../ThemeProvider'
 
-export const TEXT_ROW_HEIGHT = '20px' // custom value off the scale
-
 export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme) => {
   const style = {
     default: {
@@ -11,6 +9,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       boxShadow: `${theme?.shadows.btn.shadow}, ${theme?.shadows.btn.insetShadow}`,
       '&:hover:not([disabled])': {
         backgroundColor: 'btn.hoverBg',
+        borderColor: 'btn.hoverBorder',
       },
       '&:active:not([disabled])': {
         backgroundColor: 'btn.activeBg',
@@ -30,7 +29,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
     primary: {
       color: 'btn.primary.text',
       backgroundColor: 'btn.primary.bg',
-      borderColor: 'border.subtle',
+      borderColor: 'btn.primary.border',
       boxShadow: `${theme?.shadows.btn.primary.shadow}`,
       '&:hover:not([disabled])': {
         color: 'btn.primary.hoverText',
@@ -105,7 +104,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
     invisible: {
       color: 'accent.fg',
       backgroundColor: 'transparent',
-      border: '0',
+      borderColor: 'transparent',
       boxShadow: 'none',
       '&:hover:not([disabled])': {
         backgroundColor: 'btn.hoverBg',
@@ -122,6 +121,15 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       '&[aria-expanded=true]': {
         backgroundColor: 'btn.selectedBg',
       },
+      svg: {
+        color: 'fg.muted',
+      },
+      '&[data-no-visuals]': {
+        color: 'accent.fg',
+      },
+      '&:has([data-component="ButtonCounter"])': {
+        color: 'accent.fg',
+      },
     },
     outline: {
       color: 'btn.outline.text',
@@ -170,70 +178,42 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
   return style[variant]
 }
 
-/* The button heights have to amount to 
-  small - 28
-  medium - 32
-  large - 34
-  In icon these have to be square.
-*/
-export const getSizeStyles = (size = 'medium', variant: VariantType = 'default', iconOnly: boolean) => {
-  let paddingY, paddingX, fontSize
-  switch (size) {
-    case 'small':
-      paddingY = 3
-      paddingX = 12
-      fontSize = 0
-      break
-    case 'large':
-      paddingY = 9
-      paddingX = 20
-      fontSize = 2
-      break
-    case 'medium':
-    default:
-      paddingY = 5
-      paddingX = 16
-      fontSize = 1
-  }
-  if (iconOnly) {
-    // when `size !== 'medium'`, vertical alignment of the icon is thrown off
-    // because changing the font size draws an em-box that does not match the
-    // bounding box of the SVG
-    fontSize = 1
-    paddingX = paddingY + 3 // to make it a square
-  }
-  if (variant === 'invisible') {
-    paddingY = paddingY + 1 // to make up for absence of border
-  }
-  return {
-    paddingY: `${paddingY}px`,
-    paddingX: `${paddingX}px`,
-    fontSize,
-    '[data-component=ButtonCounter]': {
-      fontSize,
-    },
-  }
-}
-
 export const getBaseStyles = (theme?: Theme) => ({
   borderRadius: '2',
   border: '1px solid',
   borderColor: theme?.colors.btn.border,
   fontFamily: 'inherit',
-  fontWeight: 'bold',
-  lineHeight: TEXT_ROW_HEIGHT,
-  whiteSpace: 'nowrap',
-  verticalAlign: 'middle',
+  fontWeight: 'semibold',
+  fontSize: '1',
   cursor: 'pointer',
   appearance: 'none',
   userSelect: 'none',
   textDecoration: 'none',
   textAlign: 'center',
-  '&:disabled': {
-    cursor: 'default',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  height: '32px',
+  padding: '0 12px',
+  gap: '8px',
+  minWidth: 'max-content',
+  transition: '80ms cubic-bezier(0.65, 0, 0.35, 1)',
+  transitionProperty: 'color, fill, background-color, border-color',
+  '&[href]': {
+    display: 'inline-flex',
+    '&:hover': {
+      textDecoration: 'none',
+    },
+  },
+  '&:hover': {
+    transitionDuration: '80ms',
   },
-  '&:disabled svg': {
-    opacity: '0.6',
+  '&:active': {
+    transition: 'none',
+  },
+  '&:disabled': {
+    cursor: 'not-allowed',
+    boxShadow: 'none',
   },
   '@media (forced-colors: active)': {
     '&:focus': {
@@ -241,25 +221,90 @@ export const getBaseStyles = (theme?: Theme) => ({
       outline: 'solid 1px transparent',
     },
   },
+  '[data-component=ButtonCounter]': {
+    fontSize: '1',
+  },
+  '&[data-component=IconButton]': {
+    display: 'inline-grid',
+    padding: 'unset',
+    placeContent: 'center',
+    width: '32px',
+    minWidth: 'unset',
+  },
+  '&[data-size="small"]': {
+    padding: '0 8px',
+    height: '28px',
+    gap: '4px',
+    fontSize: '0',
+
+    '[data-component="text"]': {
+      lineHeight: 'calc(20 / 12)',
+    },
+
+    '[data-component=ButtonCounter]': {
+      fontSize: '0',
+    },
+
+    '[data-component="buttonContent"] > :not(:last-child)': {
+      mr: '4px',
+    },
+
+    '&[data-component=IconButton]': {
+      width: '28px',
+      padding: 'unset',
+    },
+  },
+  '&[data-size="large"]': {
+    padding: '0 16px',
+    height: '40px',
+    gap: '8px',
+
+    '[data-component="buttonContent"] > :not(:last-child)': {
+      mr: '8px',
+    },
+
+    '&[data-component=IconButton]': {
+      width: '40px',
+      padding: 'unset',
+    },
+  },
 })
 
 export const getButtonStyles = (theme?: Theme) => {
   const styles = {
     ...getBaseStyles(theme),
-    display: 'grid',
-    gridTemplateAreas: '"leadingIcon text trailingIcon"',
-    '& > :not(:last-child)': {
-      mr: '2',
+    '&[data-block="block"]': {
+      width: '100%',
     },
-    '[data-component="leadingIcon"]': {
-      gridArea: 'leadingIcon',
+    '[data-component="leadingVisual"]': {
+      gridArea: 'leadingVisual',
     },
     '[data-component="text"]': {
       gridArea: 'text',
+      lineHeight: 'calc(20/14)',
+      whiteSpace: 'nowrap',
     },
-    '[data-component="trailingIcon"]': {
-      gridArea: 'trailingIcon',
+    '[data-component="trailingVisual"]': {
+      gridArea: 'trailingVisual',
+    },
+    '[data-component="trailingAction"]': {
+      marginRight: '-4px',
+    },
+    '[data-component="buttonContent"]': {
+      flex: '1 0 auto',
+      display: 'grid',
+      gridTemplateAreas: '"leadingVisual text trailingVisual"',
+      gridTemplateColumns: 'min-content minmax(0, auto) min-content',
+      alignItems: 'center',
+      alignContent: 'center',
+    },
+    '[data-component="buttonContent"] > :not(:last-child)': {
+      mr: '8px',
     },
   }
   return styles
 }
+
+export const getAlignContentSize = (alignContent: AlignContent = 'center') => ({
+  justifyContent: alignContent === 'center' ? 'center' : 'flex-start',
+})
diff --git a/src/Button/types.ts b/src/Button/types.ts
index f68372b620c..68eade62b71 100644
--- a/src/Button/types.ts
+++ b/src/Button/types.ts
@@ -12,6 +12,8 @@ export type VariantType = 'default' | 'primary' | 'invisible' | 'danger' | 'outl
 
 export type Size = 'small' | 'medium' | 'large'
 
+export type AlignContent = 'start' | 'center'
+
 type ButtonA11yProps =
   | {'aria-label': string; 'aria-labelledby'?: undefined}
   | {'aria-label'?: undefined; 'aria-labelledby': string}
@@ -29,10 +31,18 @@ export type ButtonBaseProps = {
    * Items that are disabled can not be clicked, selected, or navigated through.
    */
   disabled?: boolean
+  /**
+   * Allow button width to fill its container.
+   */
+  block?: boolean
 } & SxProp &
   React.ButtonHTMLAttributes<HTMLButtonElement>
 
 export type ButtonProps = {
+  /**
+   * The icon for the IconButton
+   */
+  icon?: React.ComponentType | null | undefined
   /**
    * The leading icon comes before button content
    */
@@ -41,7 +51,15 @@ export type ButtonProps = {
    * The trailing icon comes after button content
    */
   trailingIcon?: React.ComponentType | null | undefined
+  /**
+   * Trailing action appears to the right of the trailing visual and is always locked to the end
+   */
+  trailingAction?: React.ComponentType | null | undefined
   children: React.ReactNode
+  /**
+   * Content alignment for when visuals are present
+   */
+  alignContent?: AlignContent
 } & ButtonBaseProps
 
 export type IconButtonProps = ButtonA11yProps & {
diff --git a/src/Token/TokenBase.tsx b/src/Token/TokenBase.tsx
index 15fc13354af..477d79c80ee 100644
--- a/src/Token/TokenBase.tsx
+++ b/src/Token/TokenBase.tsx
@@ -76,8 +76,6 @@ const variants = variant<
     lineHeight: string
     paddingLeft: number
     paddingRight: number
-    paddingTop: number
-    paddingBottom: number
   },
   TokenSizeKeys
 >({
@@ -90,10 +88,6 @@ const variants = variant<
       lineHeight: tokenSizes.small,
       paddingLeft: 1,
       paddingRight: 1,
-      // need to explicitly set padding top and bottom to "0" to override default `<button>` element styles
-      // without setting these, the "x" appears vertically mis-aligned
-      paddingTop: 0,
-      paddingBottom: 0,
     },
     medium: {
       fontSize: 0,
@@ -101,8 +95,6 @@ const variants = variant<
       lineHeight: tokenSizes.medium,
       paddingLeft: 2,
       paddingRight: 2,
-      paddingTop: 0,
-      paddingBottom: 0,
     },
     large: {
       fontSize: 0,
@@ -110,8 +102,6 @@ const variants = variant<
       lineHeight: tokenSizes.large,
       paddingLeft: 2,
       paddingRight: 2,
-      paddingTop: 0,
-      paddingBottom: 0,
     },
     extralarge: xlargeVariantStyles,
     xlarge: xlargeVariantStyles,
diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx
index e4257354934..2db11b07916 100644
--- a/src/UnderlineNav2/UnderlineNav.tsx
+++ b/src/UnderlineNav2/UnderlineNav.tsx
@@ -343,7 +343,7 @@ export const UnderlineNav = forwardRef(
                   aria-controls={disclosureWidgetId}
                   aria-expanded={isWidgetOpen}
                   onClick={onAnchorClick}
-                  trailingIcon={TriangleDownIcon}
+                  trailingAction={TriangleDownIcon}
                 >
                   <Box as="span">
                     More<VisuallyHidden as="span">&nbsp;{`${ariaLabel} items`}</VisuallyHidden>
diff --git a/src/UnderlineNav2/examples.stories.tsx b/src/UnderlineNav2/examples.stories.tsx
index d893a9894e0..3a2221a4599 100644
--- a/src/UnderlineNav2/examples.stories.tsx
+++ b/src/UnderlineNav2/examples.stories.tsx
@@ -128,7 +128,7 @@ export const ProfilePage = () => {
 
           {/* Edit Profile / Profile details */}
           <Box sx={{display: 'flex', flexDirection: 'column', color: 'fg.onEmphasis'}}>
-            <Button sx={{width: '100%'}}>Edit Profile</Button>
+            <Button block>Edit Profile</Button>
 
             <Box sx={{display: 'flex', flexDirection: 'row', alignItems: 'center', marginTop: 3}}>
               <StyledOcticon icon={PeopleIcon} size={16} sx={{marginRight: 1}} />
diff --git a/src/_TextInputInnerAction.tsx b/src/_TextInputInnerAction.tsx
index 32f145ce3d6..fe2834eda8e 100644
--- a/src/_TextInputInnerAction.tsx
+++ b/src/_TextInputInnerAction.tsx
@@ -20,13 +20,17 @@ type TextInputActionProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
 } & SxProp
 
 const invisibleButtonStyleOverrides = {
-  color: 'fg.default',
   paddingTop: '2px',
   paddingRight: '4px',
   paddingBottom: '2px',
   paddingLeft: '4px',
   position: 'relative',
 
+  '&[data-component="IconButton"]': {
+    width: 'var(--inner-action-size)',
+    height: 'var(--inner-action-size)',
+  },
+
   '@media (pointer: coarse)': {
     ':after': {
       content: '""',
@@ -77,7 +81,7 @@ const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>(
     }
 
     return (
-      <Box as="span" className="TextInput-action" margin={1}>
+      <Box as="span" className="TextInput-action" marginLeft={1} marginRight={1} lineHeight="0">
         {icon && !children ? (
           <Tooltip aria-label={ariaLabel}>
             <IconButton
@@ -94,7 +98,7 @@ const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>(
           </Tooltip>
         ) : (
           <ConditionalTooltip aria-label={ariaLabel}>
-            <Button variant={variant} size="small" type="button" sx={sx} {...rest} ref={forwardedRef}>
+            <Button variant={variant} type="button" sx={sx} {...rest} ref={forwardedRef}>
               {children}
             </Button>
           </ConditionalTooltip>
diff --git a/src/_TextInputWrapper.tsx b/src/_TextInputWrapper.tsx
index f1e991abfa3..5af6ff7d396 100644
--- a/src/_TextInputWrapper.tsx
+++ b/src/_TextInputWrapper.tsx
@@ -27,16 +27,21 @@ const sizeVariants = variant({
   prop: 'size',
   variants: {
     small: {
+      '--inner-action-size': '20px',
       minHeight: '28px',
       px: 2,
       py: '3px',
       fontSize: 0,
       lineHeight: '20px',
     },
+    medium: {
+      '--inner-action-size': '24px',
+    },
     large: {
+      '--inner-action-size': '28px',
       px: 2,
       py: '10px',
-      fontSize: 3,
+      height: '40px',
     },
   },
 })
@@ -143,7 +148,7 @@ export const TextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
     css`
       font-family: ${get('fonts.mono')};
     `}
-  
+
   ${props =>
     props.validationStatus === 'error' &&
     css`
@@ -165,7 +170,7 @@ export const TextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
       display: flex;
       align-self: stretch;
     `}
-      
+
   // Ensures inputs don' t zoom on mobile but are body-font size on desktop
   @media (min-width: ${get('breakpoints.1')}) {
     font-size: ${get('fontSizes.1')};
diff --git a/src/__tests__/Button.test.tsx b/src/__tests__/Button.test.tsx
index aaa887cdbfa..edbc3f37c60 100644
--- a/src/__tests__/Button.test.tsx
+++ b/src/__tests__/Button.test.tsx
@@ -7,7 +7,7 @@ import {SearchIcon} from '@primer/octicons-react'
 expect.extend(toHaveNoViolations)
 
 describe('Button', () => {
-  behavesAsComponent({Component: Button})
+  behavesAsComponent({Component: Button, options: {skipSx: true}})
 
   it('renders a <button>', () => {
     const container = render(<Button>Default</Button>)
@@ -29,10 +29,10 @@ describe('Button', () => {
     expect(onClick).toHaveBeenCalledTimes(1)
   })
 
-  it('respects width props', () => {
-    const container = render(<Button sx={{width: 200}}>Block</Button>)
+  it('respects block prop', () => {
+    const container = render(<Button block>Block</Button>)
     const button = container.getByRole('button')
-    expect(button).toHaveStyleRule('width', '200px')
+    expect(button).toMatchSnapshot()
   })
 
   it('respects the "disabled" prop', () => {
@@ -48,20 +48,16 @@ describe('Button', () => {
     expect(onClick).toHaveBeenCalledTimes(0)
   })
 
-  it('respects the "variant" prop', () => {
+  it('respects the small size prop', () => {
     const container = render(<Button size="small">Smol</Button>)
     const button = container.getByRole('button')
-    expect(button).toHaveStyleRule('font-size', '12px')
+    expect(button).toMatchSnapshot()
   })
 
-  it('respects the "fontSize" prop over the "variant" prop', () => {
-    const container = render(
-      <Button size="small" sx={{fontSize: 20}}>
-        Big Smol
-      </Button>,
-    )
+  it('respects the large size prop', () => {
+    const container = render(<Button size="large">Smol</Button>)
     const button = container.getByRole('button')
-    expect(button).toHaveStyleRule('font-size', '20px')
+    expect(button).toMatchSnapshot()
   })
 
   it('styles primary button appropriately', () => {
@@ -82,22 +78,15 @@ describe('Button', () => {
     expect(button).toMatchSnapshot()
   })
 
-  it('styles outline button appropriately', () => {
-    const container = render(<Button variant="outline">Outline</Button>)
-    const button = container.getByRole('button')
-    expect(button).toMatchSnapshot()
-  })
-
-  it('styles icon only button to make it a square', () => {
-    const container = render(<IconButton icon={SearchIcon} aria-label="Search button" />)
-    const IconOnlyButton = container.getByRole('button')
-    expect(IconOnlyButton).toHaveStyleRule('padding-right', '8px')
-    expect(IconOnlyButton).toMatchSnapshot()
-  })
-
   it('makes sure icon button has an aria-label', () => {
     const container = render(<IconButton icon={SearchIcon} aria-label="Search button" />)
     const IconOnlyButton = container.getByLabelText('Search button')
     expect(IconOnlyButton).toBeTruthy()
   })
+
+  it('respects the alignContent prop', () => {
+    const container = render(<Button alignContent="start">Align start</Button>)
+    const button = container.getByRole('button')
+    expect(button).toMatchSnapshot()
+  })
 })
diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
index 44774e738c9..c4cce622dac 100644
--- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
@@ -8,8 +8,18 @@ exports[`ActionMenu renders consistently 1`] = `
 }
 
 .c2 {
-  display: inline-block;
-  margin-left: 8px;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  pointer-events: none;
 }
 
 .c1 {
@@ -17,10 +27,8 @@ exports[`ActionMenu renders consistently 1`] = `
   border: 1px solid;
   border-color: rgba(27,31,36,0.15);
   font-family: inherit;
-  font-weight: 600;
-  line-height: 20px;
-  white-space: nowrap;
-  vertical-align: middle;
+  font-weight: 500;
+  font-size: 14px;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -32,13 +40,28 @@ exports[`ActionMenu renders consistently 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   text-align: center;
-  display: grid;
-  grid-template-areas: "leadingIcon text trailingIcon";
-  padding-top: 5px;
-  padding-bottom: 5px;
-  padding-left: 16px;
-  padding-right: 16px;
-  font-size: 14px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  height: 32px;
+  padding: 0 12px;
+  gap: 8px;
+  min-width: -webkit-max-content;
+  min-width: -moz-max-content;
+  min-width: max-content;
+  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  -webkit-transition-property: color,fill,background-color,border-color;
+  transition-property: color,fill,background-color,border-color;
   color: #24292f;
   background-color: #f6f8fa;
   box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
@@ -60,8 +83,31 @@ exports[`ActionMenu renders consistently 1`] = `
   outline-offset: -2px;
 }
 
+.c1[href] {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c1[href]:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c1:hover {
+  -webkit-transition-duration: 80ms;
+  transition-duration: 80ms;
+}
+
+.c1:active {
+  -webkit-transition: none;
+  transition: none;
+}
+
 .c1:disabled {
-  cursor: default;
+  cursor: not-allowed;
+  box-shadow: none;
   color: #8c959f;
 }
 
@@ -69,32 +115,102 @@ exports[`ActionMenu renders consistently 1`] = `
   color: inherit;
 }
 
-.c1:disabled svg {
-  opacity: 0.6;
+.c1 [data-component=ButtonCounter] {
+  font-size: 14px;
+}
+
+.c1[data-component=IconButton] {
+  display: inline-grid;
+  padding: unset;
+  place-content: center;
+  width: 32px;
+  min-width: unset;
+}
+
+.c1[data-size="small"] {
+  padding: 0 8px;
+  height: 28px;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.c1[data-size="small"] [data-component="text"] {
+  line-height: calc(20 / 12);
+}
+
+.c1[data-size="small"] [data-component=ButtonCounter] {
+  font-size: 12px;
 }
 
-.c1 > :not(:last-child) {
+.c1[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 4px;
+}
+
+.c1[data-size="small"][data-component=IconButton] {
+  width: 28px;
+  padding: unset;
+}
+
+.c1[data-size="large"] {
+  padding: 0 16px;
+  height: 40px;
+  gap: 8px;
+}
+
+.c1[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1 [data-component="leadingIcon"] {
-  grid-area: leadingIcon;
+.c1[data-size="large"][data-component=IconButton] {
+  width: 40px;
+  padding: unset;
+}
+
+.c1[data-block="block"] {
+  width: 100%;
+}
+
+.c1 [data-component="leadingVisual"] {
+  grid-area: leadingVisual;
 }
 
 .c1 [data-component="text"] {
   grid-area: text;
+  line-height: calc(20/14);
+  white-space: nowrap;
 }
 
-.c1 [data-component="trailingIcon"] {
-  grid-area: trailingIcon;
+.c1 [data-component="trailingVisual"] {
+  grid-area: trailingVisual;
 }
 
-.c1 [data-component=ButtonCounter] {
-  font-size: 14px;
+.c1 [data-component="trailingAction"] {
+  margin-right: -4px;
+}
+
+.c1 [data-component="buttonContent"] {
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  display: grid;
+  grid-template-areas: "leadingVisual text trailingVisual";
+  grid-template-columns: min-content minmax(0,auto) min-content;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
+.c1 [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 8px;
 }
 
 .c1:hover:not([disabled]) {
   background-color: #f3f4f6;
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c1:active:not([disabled]) {
@@ -107,11 +223,6 @@ exports[`ActionMenu renders consistently 1`] = `
   border-color: rgba(27,31,36,0.15);
 }
 
-.c1 [data-component=trailingIcon] {
-  margin-left: -4px;
-  margin-right: -4px;
-}
-
 @media (forced-colors:active) {
   .c1:focus {
     outline: solid 1px transparent;
@@ -127,6 +238,7 @@ exports[`ActionMenu renders consistently 1`] = `
   <button
     aria-haspopup="true"
     className="c1"
+    data-block={null}
     id="react-aria-1"
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -134,13 +246,18 @@ exports[`ActionMenu renders consistently 1`] = `
     type="button"
   >
     <span
-      data-component="text"
+      className="c2"
+      data-component="buttonContent"
     >
-      Toggle Menu
+      <span
+        data-component="text"
+      >
+        Toggle Menu
+      </span>
     </span>
     <span
-      className="c2"
-      data-component="trailingIcon"
+      className="c3"
+      data-component="trailingAction"
     >
       <svg
         aria-hidden="true"
diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap
index c7903a5c205..e1933f893c2 100644
--- a/src/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Button.test.tsx.snap
@@ -1,15 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Button renders consistently 1`] = `
+.c1 {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
 .c0 {
   border-radius: 6px;
   border: 1px solid;
   border-color: rgba(27,31,36,0.15);
   font-family: inherit;
-  font-weight: 600;
-  line-height: 20px;
-  white-space: nowrap;
-  vertical-align: middle;
+  font-weight: 500;
+  font-size: 14px;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -21,13 +26,28 @@ exports[`Button renders consistently 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   text-align: center;
-  display: grid;
-  grid-template-areas: "leadingIcon text trailingIcon";
-  padding-top: 5px;
-  padding-bottom: 5px;
-  padding-left: 16px;
-  padding-right: 16px;
-  font-size: 14px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  height: 32px;
+  padding: 0 12px;
+  gap: 8px;
+  min-width: -webkit-max-content;
+  min-width: -moz-max-content;
+  min-width: max-content;
+  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  -webkit-transition-property: color,fill,background-color,border-color;
+  transition-property: color,fill,background-color,border-color;
   color: #24292f;
   background-color: #f6f8fa;
   box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
@@ -49,8 +69,31 @@ exports[`Button renders consistently 1`] = `
   outline-offset: -2px;
 }
 
+.c0[href] {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c0[href]:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:hover {
+  -webkit-transition-duration: 80ms;
+  transition-duration: 80ms;
+}
+
+.c0:active {
+  -webkit-transition: none;
+  transition: none;
+}
+
 .c0:disabled {
-  cursor: default;
+  cursor: not-allowed;
+  box-shadow: none;
   color: #8c959f;
 }
 
@@ -58,32 +101,102 @@ exports[`Button renders consistently 1`] = `
   color: inherit;
 }
 
-.c0:disabled svg {
-  opacity: 0.6;
+.c0 [data-component=ButtonCounter] {
+  font-size: 14px;
+}
+
+.c0[data-component=IconButton] {
+  display: inline-grid;
+  padding: unset;
+  place-content: center;
+  width: 32px;
+  min-width: unset;
+}
+
+.c0[data-size="small"] {
+  padding: 0 8px;
+  height: 28px;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.c0[data-size="small"] [data-component="text"] {
+  line-height: calc(20 / 12);
+}
+
+.c0[data-size="small"] [data-component=ButtonCounter] {
+  font-size: 12px;
+}
+
+.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 4px;
+}
+
+.c0[data-size="small"][data-component=IconButton] {
+  width: 28px;
+  padding: unset;
 }
 
-.c0 > :not(:last-child) {
+.c0[data-size="large"] {
+  padding: 0 16px;
+  height: 40px;
+  gap: 8px;
+}
+
+.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 [data-component="leadingIcon"] {
-  grid-area: leadingIcon;
+.c0[data-size="large"][data-component=IconButton] {
+  width: 40px;
+  padding: unset;
+}
+
+.c0[data-block="block"] {
+  width: 100%;
+}
+
+.c0 [data-component="leadingVisual"] {
+  grid-area: leadingVisual;
 }
 
 .c0 [data-component="text"] {
   grid-area: text;
+  line-height: calc(20/14);
+  white-space: nowrap;
 }
 
-.c0 [data-component="trailingIcon"] {
-  grid-area: trailingIcon;
+.c0 [data-component="trailingVisual"] {
+  grid-area: trailingVisual;
 }
 
-.c0 [data-component=ButtonCounter] {
-  font-size: 14px;
+.c0 [data-component="trailingAction"] {
+  margin-right: -4px;
+}
+
+.c0 [data-component="buttonContent"] {
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  display: grid;
+  grid-template-areas: "leadingVisual text trailingVisual";
+  grid-template-columns: min-content minmax(0,auto) min-content;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
+.c0 [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 8px;
 }
 
 .c0:hover:not([disabled]) {
   background-color: #f3f4f6;
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c0:active:not([disabled]) {
@@ -104,19 +217,31 @@ exports[`Button renders consistently 1`] = `
 
 <button
   className="c0"
+  data-block={null}
+  data-no-visuals={true}
   type="button"
-/>
+>
+  <span
+    className="c1"
+    data-component="buttonContent"
+  />
+</button>
 `;
 
-exports[`Button styles danger button appropriately 1`] = `
+exports[`Button respects block prop 1`] = `
+.c1 {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
 .c0 {
   border-radius: 2;
   border: 1px solid;
   font-family: inherit;
-  font-weight: bold;
-  line-height: 20px;
-  white-space: nowrap;
-  vertical-align: middle;
+  font-weight: semibold;
+  font-size: 14px;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -128,16 +253,31 @@ exports[`Button styles danger button appropriately 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   text-align: center;
-  display: grid;
-  grid-template-areas: "leadingIcon text trailingIcon";
-  padding-top: 5px;
-  padding-bottom: 5px;
-  padding-left: 16px;
-  padding-right: 16px;
-  font-size: 14px;
-  color: btn.danger.text;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  height: 32px;
+  padding: 0 12px;
+  gap: 8px;
+  min-width: -webkit-max-content;
+  min-width: -moz-max-content;
+  min-width: max-content;
+  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  -webkit-transition-property: color,fill,background-color,border-color;
+  transition-property: color,fill,background-color,border-color;
+  color: btn.text;
   background-color: btn.bg;
-  box-shadow: undefined;
+  box-shadow: undefined,undefined;
 }
 
 .c0:focus:not(:disabled) {
@@ -156,68 +296,144 @@ exports[`Button styles danger button appropriately 1`] = `
   outline-offset: -2px;
 }
 
+.c0[href] {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c0[href]:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:hover {
+  -webkit-transition-duration: 80ms;
+  transition-duration: 80ms;
+}
+
+.c0:active {
+  -webkit-transition: none;
+  transition: none;
+}
+
 .c0:disabled {
-  cursor: default;
-  color: btn.danger.disabledText;
-  background-color: btn.danger.disabledBg;
-  border-color: btn.danger.disabledBorder;
+  cursor: not-allowed;
+  box-shadow: none;
+  color: primer.fg.disabled;
 }
 
 .c0:disabled [data-component=ButtonCounter] {
   color: inherit;
-  background-color: btn.danger.disabledCounterBg;
 }
 
-.c0:disabled svg {
-  opacity: 0.6;
+.c0 [data-component=ButtonCounter] {
+  font-size: 14px;
+}
+
+.c0[data-component=IconButton] {
+  display: inline-grid;
+  padding: unset;
+  place-content: center;
+  width: 32px;
+  min-width: unset;
+}
+
+.c0[data-size="small"] {
+  padding: 0 8px;
+  height: 28px;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.c0[data-size="small"] [data-component="text"] {
+  line-height: calc(20 / 12);
+}
+
+.c0[data-size="small"] [data-component=ButtonCounter] {
+  font-size: 12px;
+}
+
+.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 4px;
+}
+
+.c0[data-size="small"][data-component=IconButton] {
+  width: 28px;
+  padding: unset;
+}
+
+.c0[data-size="large"] {
+  padding: 0 16px;
+  height: 40px;
+  gap: 8px;
 }
 
-.c0 > :not(:last-child) {
+.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 [data-component="leadingIcon"] {
-  grid-area: leadingIcon;
+.c0[data-size="large"][data-component=IconButton] {
+  width: 40px;
+  padding: unset;
+}
+
+.c0[data-block="block"] {
+  width: 100%;
+}
+
+.c0 [data-component="leadingVisual"] {
+  grid-area: leadingVisual;
 }
 
 .c0 [data-component="text"] {
   grid-area: text;
+  line-height: calc(20/14);
+  white-space: nowrap;
 }
 
-.c0 [data-component="trailingIcon"] {
-  grid-area: trailingIcon;
+.c0 [data-component="trailingVisual"] {
+  grid-area: trailingVisual;
 }
 
-.c0 [data-component=ButtonCounter] {
-  font-size: 14px;
-  color: btn.danger.text;
-  background-color: btn.danger.counterBg;
+.c0 [data-component="trailingAction"] {
+  margin-right: -4px;
 }
 
-.c0:hover:not([disabled]) {
-  color: btn.danger.hoverText;
-  background-color: btn.danger.hoverBg;
-  border-color: btn.danger.hoverBorder;
-  box-shadow: undefined;
+.c0 [data-component="buttonContent"] {
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  display: grid;
+  grid-template-areas: "leadingVisual text trailingVisual";
+  grid-template-columns: min-content minmax(0,auto) min-content;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
+.c0 [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 8px;
 }
 
-.c0:hover:not([disabled]) [data-component=ButtonCounter] {
-  background-color: btn.danger.hoverCounterBg;
-  color: btn.danger.hoverText;
+.c0:hover:not([disabled]) {
+  background-color: btn.hoverBg;
+  border-color: btn.hoverBorder;
 }
 
 .c0:active:not([disabled]) {
-  color: btn.danger.selectedText;
-  background-color: btn.danger.selectedBg;
-  box-shadow: undefined;
-  border-color: btn.danger.selectedBorder;
+  background-color: btn.activeBg;
+  border-color: btn.activeBorder;
 }
 
 .c0[aria-expanded=true] {
-  color: btn.danger.selectedText;
-  background-color: btn.danger.selectedBg;
-  box-shadow: undefined;
-  border-color: btn.danger.selectedBorder;
+  background-color: btn.activeBg;
+  border-color: btn.activeBorder;
 }
 
 @media (forced-colors:active) {
@@ -228,29 +444,37 @@ exports[`Button styles danger button appropriately 1`] = `
 
 <button
   class="c0"
+  data-block="block"
+  data-no-visuals="true"
   type="button"
 >
   <span
-    data-component="text"
+    class="c1"
+    data-component="buttonContent"
   >
-    Danger
+    <span
+      data-component="text"
+    >
+      Block
+    </span>
   </span>
 </button>
 `;
 
-exports[`Button styles icon only button to make it a square 1`] = `
+exports[`Button respects the alignContent prop 1`] = `
 .c1 {
-  display: inline-block;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
 }
 
 .c0 {
   border-radius: 2;
   border: 1px solid;
   font-family: inherit;
-  font-weight: bold;
-  line-height: 20px;
-  white-space: nowrap;
-  vertical-align: middle;
+  font-weight: semibold;
+  font-size: 14px;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -262,11 +486,28 @@ exports[`Button styles icon only button to make it a square 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   text-align: center;
-  padding-top: 5px;
-  padding-bottom: 5px;
-  padding-left: 8px;
-  padding-right: 8px;
-  font-size: 14px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  height: 32px;
+  padding: 0 12px;
+  gap: 8px;
+  min-width: -webkit-max-content;
+  min-width: -moz-max-content;
+  min-width: max-content;
+  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  -webkit-transition-property: color,fill,background-color,border-color;
+  transition-property: color,fill,background-color,border-color;
   color: btn.text;
   background-color: btn.bg;
   box-shadow: undefined,undefined;
@@ -288,8 +529,31 @@ exports[`Button styles icon only button to make it a square 1`] = `
   outline-offset: -2px;
 }
 
+.c0[href] {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c0[href]:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:hover {
+  -webkit-transition-duration: 80ms;
+  transition-duration: 80ms;
+}
+
+.c0:active {
+  -webkit-transition: none;
+  transition: none;
+}
+
 .c0:disabled {
-  cursor: default;
+  cursor: not-allowed;
+  box-shadow: none;
   color: primer.fg.disabled;
 }
 
@@ -297,16 +561,102 @@ exports[`Button styles icon only button to make it a square 1`] = `
   color: inherit;
 }
 
-.c0:disabled svg {
-  opacity: 0.6;
-}
-
 .c0 [data-component=ButtonCounter] {
   font-size: 14px;
 }
 
+.c0[data-component=IconButton] {
+  display: inline-grid;
+  padding: unset;
+  place-content: center;
+  width: 32px;
+  min-width: unset;
+}
+
+.c0[data-size="small"] {
+  padding: 0 8px;
+  height: 28px;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.c0[data-size="small"] [data-component="text"] {
+  line-height: calc(20 / 12);
+}
+
+.c0[data-size="small"] [data-component=ButtonCounter] {
+  font-size: 12px;
+}
+
+.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 4px;
+}
+
+.c0[data-size="small"][data-component=IconButton] {
+  width: 28px;
+  padding: unset;
+}
+
+.c0[data-size="large"] {
+  padding: 0 16px;
+  height: 40px;
+  gap: 8px;
+}
+
+.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0[data-size="large"][data-component=IconButton] {
+  width: 40px;
+  padding: unset;
+}
+
+.c0[data-block="block"] {
+  width: 100%;
+}
+
+.c0 [data-component="leadingVisual"] {
+  grid-area: leadingVisual;
+}
+
+.c0 [data-component="text"] {
+  grid-area: text;
+  line-height: calc(20/14);
+  white-space: nowrap;
+}
+
+.c0 [data-component="trailingVisual"] {
+  grid-area: trailingVisual;
+}
+
+.c0 [data-component="trailingAction"] {
+  margin-right: -4px;
+}
+
+.c0 [data-component="buttonContent"] {
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  display: grid;
+  grid-template-areas: "leadingVisual text trailingVisual";
+  grid-template-columns: min-content minmax(0,auto) min-content;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
+.c0 [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 8px;
+}
+
 .c0:hover:not([disabled]) {
   background-color: btn.hoverBg;
+  border-color: btn.hoverBorder;
 }
 
 .c0:active:not([disabled]) {
@@ -326,41 +676,37 @@ exports[`Button styles icon only button to make it a square 1`] = `
 }
 
 <button
-  aria-label="Search button"
   class="c0"
+  data-no-visuals="true"
+  type="button"
 >
   <span
     class="c1"
+    data-component="buttonContent"
   >
-    <svg
-      aria-hidden="true"
-      class="octicon octicon-search"
-      fill="currentColor"
-      focusable="false"
-      height="16"
-      role="img"
-      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-      viewBox="0 0 16 16"
-      width="16"
+    <span
+      data-component="text"
     >
-      <path
-        d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"
-        fill-rule="evenodd"
-      />
-    </svg>
+      Align start
+    </span>
   </span>
 </button>
 `;
 
-exports[`Button styles invisible button appropriately 1`] = `
+exports[`Button respects the large size prop 1`] = `
+.c1 {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
 .c0 {
   border-radius: 2;
-  border: 0;
+  border: 1px solid;
   font-family: inherit;
-  font-weight: bold;
-  line-height: 20px;
-  white-space: nowrap;
-  vertical-align: middle;
+  font-weight: semibold;
+  font-size: 14px;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -372,16 +718,31 @@ exports[`Button styles invisible button appropriately 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   text-align: center;
-  display: grid;
-  grid-template-areas: "leadingIcon text trailingIcon";
-  padding-top: 6px;
-  padding-bottom: 6px;
-  padding-left: 16px;
-  padding-right: 16px;
-  font-size: 14px;
-  color: accent.fg;
-  background-color: transparent;
-  box-shadow: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  height: 32px;
+  padding: 0 12px;
+  gap: 8px;
+  min-width: -webkit-max-content;
+  min-width: -moz-max-content;
+  min-width: max-content;
+  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  -webkit-transition-property: color,fill,background-color,border-color;
+  transition-property: color,fill,background-color,border-color;
+  color: btn.text;
+  background-color: btn.bg;
+  box-shadow: undefined,undefined;
 }
 
 .c0:focus:not(:disabled) {
@@ -400,8 +761,31 @@ exports[`Button styles invisible button appropriately 1`] = `
   outline-offset: -2px;
 }
 
+.c0[href] {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c0[href]:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:hover {
+  -webkit-transition-duration: 80ms;
+  transition-duration: 80ms;
+}
+
+.c0:active {
+  -webkit-transition: none;
+  transition: none;
+}
+
 .c0:disabled {
-  cursor: default;
+  cursor: not-allowed;
+  box-shadow: none;
   color: primer.fg.disabled;
 }
 
@@ -409,40 +793,112 @@ exports[`Button styles invisible button appropriately 1`] = `
   color: inherit;
 }
 
-.c0:disabled svg {
-  opacity: 0.6;
+.c0 [data-component=ButtonCounter] {
+  font-size: 14px;
+}
+
+.c0[data-component=IconButton] {
+  display: inline-grid;
+  padding: unset;
+  place-content: center;
+  width: 32px;
+  min-width: unset;
+}
+
+.c0[data-size="small"] {
+  padding: 0 8px;
+  height: 28px;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.c0[data-size="small"] [data-component="text"] {
+  line-height: calc(20 / 12);
+}
+
+.c0[data-size="small"] [data-component=ButtonCounter] {
+  font-size: 12px;
+}
+
+.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 4px;
+}
+
+.c0[data-size="small"][data-component=IconButton] {
+  width: 28px;
+  padding: unset;
+}
+
+.c0[data-size="large"] {
+  padding: 0 16px;
+  height: 40px;
+  gap: 8px;
 }
 
-.c0 > :not(:last-child) {
+.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 [data-component="leadingIcon"] {
-  grid-area: leadingIcon;
+.c0[data-size="large"][data-component=IconButton] {
+  width: 40px;
+  padding: unset;
+}
+
+.c0[data-block="block"] {
+  width: 100%;
+}
+
+.c0 [data-component="leadingVisual"] {
+  grid-area: leadingVisual;
 }
 
 .c0 [data-component="text"] {
   grid-area: text;
+  line-height: calc(20/14);
+  white-space: nowrap;
 }
 
-.c0 [data-component="trailingIcon"] {
-  grid-area: trailingIcon;
+.c0 [data-component="trailingVisual"] {
+  grid-area: trailingVisual;
 }
 
-.c0 [data-component=ButtonCounter] {
-  font-size: 14px;
+.c0 [data-component="trailingAction"] {
+  margin-right: -4px;
+}
+
+.c0 [data-component="buttonContent"] {
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  display: grid;
+  grid-template-areas: "leadingVisual text trailingVisual";
+  grid-template-columns: min-content minmax(0,auto) min-content;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
+.c0 [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 8px;
 }
 
 .c0:hover:not([disabled]) {
   background-color: btn.hoverBg;
+  border-color: btn.hoverBorder;
 }
 
 .c0:active:not([disabled]) {
-  background-color: btn.selectedBg;
+  background-color: btn.activeBg;
+  border-color: btn.activeBorder;
 }
 
 .c0[aria-expanded=true] {
-  background-color: btn.selectedBg;
+  background-color: btn.activeBg;
+  border-color: btn.activeBorder;
 }
 
 @media (forced-colors:active) {
@@ -453,26 +909,37 @@ exports[`Button styles invisible button appropriately 1`] = `
 
 <button
   class="c0"
+  data-no-visuals="true"
+  data-size="large"
   type="button"
 >
   <span
-    data-component="text"
+    class="c1"
+    data-component="buttonContent"
   >
-    Invisible
+    <span
+      data-component="text"
+    >
+      Smol
+    </span>
   </span>
 </button>
 `;
 
-exports[`Button styles outline button appropriately 1`] = `
+exports[`Button respects the small size prop 1`] = `
+.c1 {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
 .c0 {
   border-radius: 2;
   border: 1px solid;
-  border-color: btn.border;
   font-family: inherit;
-  font-weight: bold;
-  line-height: 20px;
-  white-space: nowrap;
-  vertical-align: middle;
+  font-weight: semibold;
+  font-size: 14px;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -484,16 +951,31 @@ exports[`Button styles outline button appropriately 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   text-align: center;
-  display: grid;
-  grid-template-areas: "leadingIcon text trailingIcon";
-  padding-top: 5px;
-  padding-bottom: 5px;
-  padding-left: 16px;
-  padding-right: 16px;
-  font-size: 14px;
-  color: btn.outline.text;
-  box-shadow: undefined;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  height: 32px;
+  padding: 0 12px;
+  gap: 8px;
+  min-width: -webkit-max-content;
+  min-width: -moz-max-content;
+  min-width: max-content;
+  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  -webkit-transition-property: color,fill,background-color,border-color;
+  transition-property: color,fill,background-color,border-color;
+  color: btn.text;
   background-color: btn.bg;
+  box-shadow: undefined,undefined;
 }
 
 .c0:focus:not(:disabled) {
@@ -512,68 +994,393 @@ exports[`Button styles outline button appropriately 1`] = `
   outline-offset: -2px;
 }
 
-.c0:disabled {
-  cursor: default;
-  color: btn.outline.disabledText;
-  background-color: btn.outline.disabledBg;
-  border-color: btn.border;
+.c0[href] {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
 }
 
-.c0:disabled [data-component=ButtonCounter] {
-  background-color: btn.outline.disabledCounterBg;
-  color: inherit;
-}
+.c0[href]:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:hover {
+  -webkit-transition-duration: 80ms;
+  transition-duration: 80ms;
+}
+
+.c0:active {
+  -webkit-transition: none;
+  transition: none;
+}
+
+.c0:disabled {
+  cursor: not-allowed;
+  box-shadow: none;
+  color: primer.fg.disabled;
+}
+
+.c0:disabled [data-component=ButtonCounter] {
+  color: inherit;
+}
+
+.c0 [data-component=ButtonCounter] {
+  font-size: 14px;
+}
+
+.c0[data-component=IconButton] {
+  display: inline-grid;
+  padding: unset;
+  place-content: center;
+  width: 32px;
+  min-width: unset;
+}
+
+.c0[data-size="small"] {
+  padding: 0 8px;
+  height: 28px;
+  gap: 4px;
+  font-size: 12px;
+}
 
-.c0:disabled svg {
-  opacity: 0.6;
+.c0[data-size="small"] [data-component="text"] {
+  line-height: calc(20 / 12);
 }
 
-.c0 > :not(:last-child) {
+.c0[data-size="small"] [data-component=ButtonCounter] {
+  font-size: 12px;
+}
+
+.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 4px;
+}
+
+.c0[data-size="small"][data-component=IconButton] {
+  width: 28px;
+  padding: unset;
+}
+
+.c0[data-size="large"] {
+  padding: 0 16px;
+  height: 40px;
+  gap: 8px;
+}
+
+.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 [data-component="leadingIcon"] {
-  grid-area: leadingIcon;
+.c0[data-size="large"][data-component=IconButton] {
+  width: 40px;
+  padding: unset;
+}
+
+.c0[data-block="block"] {
+  width: 100%;
+}
+
+.c0 [data-component="leadingVisual"] {
+  grid-area: leadingVisual;
 }
 
 .c0 [data-component="text"] {
   grid-area: text;
+  line-height: calc(20/14);
+  white-space: nowrap;
+}
+
+.c0 [data-component="trailingVisual"] {
+  grid-area: trailingVisual;
+}
+
+.c0 [data-component="trailingAction"] {
+  margin-right: -4px;
+}
+
+.c0 [data-component="buttonContent"] {
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  display: grid;
+  grid-template-areas: "leadingVisual text trailingVisual";
+  grid-template-columns: min-content minmax(0,auto) min-content;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
+.c0 [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 8px;
 }
 
-.c0 [data-component="trailingIcon"] {
-  grid-area: trailingIcon;
+.c0:hover:not([disabled]) {
+  background-color: btn.hoverBg;
+  border-color: btn.hoverBorder;
+}
+
+.c0:active:not([disabled]) {
+  background-color: btn.activeBg;
+  border-color: btn.activeBorder;
+}
+
+.c0[aria-expanded=true] {
+  background-color: btn.activeBg;
+  border-color: btn.activeBorder;
+}
+
+@media (forced-colors:active) {
+  .c0:focus {
+    outline: solid 1px transparent;
+  }
+}
+
+<button
+  class="c0"
+  data-no-visuals="true"
+  data-size="small"
+  type="button"
+>
+  <span
+    class="c1"
+    data-component="buttonContent"
+  >
+    <span
+      data-component="text"
+    >
+      Smol
+    </span>
+  </span>
+</button>
+`;
+
+exports[`Button styles danger button appropriately 1`] = `
+.c1 {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c0 {
+  border-radius: 2;
+  border: 1px solid;
+  font-family: inherit;
+  font-weight: semibold;
+  font-size: 14px;
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  height: 32px;
+  padding: 0 12px;
+  gap: 8px;
+  min-width: -webkit-max-content;
+  min-width: -moz-max-content;
+  min-width: max-content;
+  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  -webkit-transition-property: color,fill,background-color,border-color;
+  transition-property: color,fill,background-color,border-color;
+  color: btn.danger.text;
+  background-color: btn.bg;
+  box-shadow: undefined;
+}
+
+.c0:focus:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid;
+  outline-offset: -2px;
+}
+
+.c0:focus:not(:disabled):not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c0:focus-visible:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid;
+  outline-offset: -2px;
+}
+
+.c0[href] {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c0[href]:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:hover {
+  -webkit-transition-duration: 80ms;
+  transition-duration: 80ms;
+}
+
+.c0:active {
+  -webkit-transition: none;
+  transition: none;
+}
+
+.c0:disabled {
+  cursor: not-allowed;
+  box-shadow: none;
+  color: btn.danger.disabledText;
+  background-color: btn.danger.disabledBg;
+  border-color: btn.danger.disabledBorder;
+}
+
+.c0:disabled [data-component=ButtonCounter] {
+  color: inherit;
+  background-color: btn.danger.disabledCounterBg;
 }
 
 .c0 [data-component=ButtonCounter] {
   font-size: 14px;
-  background-color: btn.outline.counterBg;
-  color: btn.outline.text;
+  color: btn.danger.text;
+  background-color: btn.danger.counterBg;
+}
+
+.c0[data-component=IconButton] {
+  display: inline-grid;
+  padding: unset;
+  place-content: center;
+  width: 32px;
+  min-width: unset;
+}
+
+.c0[data-size="small"] {
+  padding: 0 8px;
+  height: 28px;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.c0[data-size="small"] [data-component="text"] {
+  line-height: calc(20 / 12);
+}
+
+.c0[data-size="small"] [data-component=ButtonCounter] {
+  font-size: 12px;
+}
+
+.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 4px;
+}
+
+.c0[data-size="small"][data-component=IconButton] {
+  width: 28px;
+  padding: unset;
+}
+
+.c0[data-size="large"] {
+  padding: 0 16px;
+  height: 40px;
+  gap: 8px;
+}
+
+.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0[data-size="large"][data-component=IconButton] {
+  width: 40px;
+  padding: unset;
+}
+
+.c0[data-block="block"] {
+  width: 100%;
+}
+
+.c0 [data-component="leadingVisual"] {
+  grid-area: leadingVisual;
+}
+
+.c0 [data-component="text"] {
+  grid-area: text;
+  line-height: calc(20/14);
+  white-space: nowrap;
+}
+
+.c0 [data-component="trailingVisual"] {
+  grid-area: trailingVisual;
+}
+
+.c0 [data-component="trailingAction"] {
+  margin-right: -4px;
+}
+
+.c0 [data-component="buttonContent"] {
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  display: grid;
+  grid-template-areas: "leadingVisual text trailingVisual";
+  grid-template-columns: min-content minmax(0,auto) min-content;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
+.c0 [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 8px;
 }
 
 .c0:hover:not([disabled]) {
-  color: btn.outline.hoverText;
-  background-color: btn.outline.hoverBg;
-  border-color: btn.outline.hoverBorder;
+  color: btn.danger.hoverText;
+  background-color: btn.danger.hoverBg;
+  border-color: btn.danger.hoverBorder;
   box-shadow: undefined;
 }
 
 .c0:hover:not([disabled]) [data-component=ButtonCounter] {
-  background-color: btn.outline.hoverCounterBg;
-  color: inherit;
+  background-color: btn.danger.hoverCounterBg;
+  color: btn.danger.hoverText;
 }
 
 .c0:active:not([disabled]) {
-  color: btn.outline.selectedText;
-  background-color: btn.outline.selectedBg;
+  color: btn.danger.selectedText;
+  background-color: btn.danger.selectedBg;
   box-shadow: undefined;
-  border-color: btn.outline.selectedBorder;
+  border-color: btn.danger.selectedBorder;
 }
 
 .c0[aria-expanded=true] {
-  color: btn.outline.selectedText;
-  background-color: btn.outline.selectedBg;
+  color: btn.danger.selectedText;
+  background-color: btn.danger.selectedBg;
   box-shadow: undefined;
-  border-color: btn.outline.selectedBorder;
+  border-color: btn.danger.selectedBorder;
 }
 
 @media (forced-colors:active) {
@@ -584,26 +1391,37 @@ exports[`Button styles outline button appropriately 1`] = `
 
 <button
   class="c0"
+  data-no-visuals="true"
   type="button"
 >
   <span
-    data-component="text"
+    class="c1"
+    data-component="buttonContent"
   >
-    Outline
+    <span
+      data-component="text"
+    >
+      Danger
+    </span>
   </span>
 </button>
 `;
 
-exports[`Button styles primary button appropriately 1`] = `
+exports[`Button styles invisible button appropriately 1`] = `
+.c1 {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
 .c0 {
   border-radius: 2;
   border: 1px solid;
-  border-color: border.subtle;
+  border-color: transparent;
   font-family: inherit;
-  font-weight: bold;
-  line-height: 20px;
-  white-space: nowrap;
-  vertical-align: middle;
+  font-weight: semibold;
+  font-size: 14px;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -615,13 +1433,270 @@ exports[`Button styles primary button appropriately 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   text-align: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  height: 32px;
+  padding: 0 12px;
+  gap: 8px;
+  min-width: -webkit-max-content;
+  min-width: -moz-max-content;
+  min-width: max-content;
+  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  -webkit-transition-property: color,fill,background-color,border-color;
+  transition-property: color,fill,background-color,border-color;
+  color: accent.fg;
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.c0:focus:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid;
+  outline-offset: -2px;
+}
+
+.c0:focus:not(:disabled):not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c0:focus-visible:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid;
+  outline-offset: -2px;
+}
+
+.c0[href] {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c0[href]:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:hover {
+  -webkit-transition-duration: 80ms;
+  transition-duration: 80ms;
+}
+
+.c0:active {
+  -webkit-transition: none;
+  transition: none;
+}
+
+.c0:disabled {
+  cursor: not-allowed;
+  box-shadow: none;
+  color: primer.fg.disabled;
+}
+
+.c0:disabled [data-component=ButtonCounter] {
+  color: inherit;
+}
+
+.c0 [data-component=ButtonCounter] {
+  font-size: 14px;
+}
+
+.c0[data-component=IconButton] {
+  display: inline-grid;
+  padding: unset;
+  place-content: center;
+  width: 32px;
+  min-width: unset;
+}
+
+.c0[data-size="small"] {
+  padding: 0 8px;
+  height: 28px;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.c0[data-size="small"] [data-component="text"] {
+  line-height: calc(20 / 12);
+}
+
+.c0[data-size="small"] [data-component=ButtonCounter] {
+  font-size: 12px;
+}
+
+.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 4px;
+}
+
+.c0[data-size="small"][data-component=IconButton] {
+  width: 28px;
+  padding: unset;
+}
+
+.c0[data-size="large"] {
+  padding: 0 16px;
+  height: 40px;
+  gap: 8px;
+}
+
+.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0[data-size="large"][data-component=IconButton] {
+  width: 40px;
+  padding: unset;
+}
+
+.c0[data-block="block"] {
+  width: 100%;
+}
+
+.c0 [data-component="leadingVisual"] {
+  grid-area: leadingVisual;
+}
+
+.c0 [data-component="text"] {
+  grid-area: text;
+  line-height: calc(20/14);
+  white-space: nowrap;
+}
+
+.c0 [data-component="trailingVisual"] {
+  grid-area: trailingVisual;
+}
+
+.c0 [data-component="trailingAction"] {
+  margin-right: -4px;
+}
+
+.c0 [data-component="buttonContent"] {
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
   display: grid;
-  grid-template-areas: "leadingIcon text trailingIcon";
-  padding-top: 5px;
-  padding-bottom: 5px;
-  padding-left: 16px;
-  padding-right: 16px;
+  grid-template-areas: "leadingVisual text trailingVisual";
+  grid-template-columns: min-content minmax(0,auto) min-content;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
+.c0 [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0:hover:not([disabled]) {
+  background-color: btn.hoverBg;
+}
+
+.c0:active:not([disabled]) {
+  background-color: btn.selectedBg;
+}
+
+.c0[aria-expanded=true] {
+  background-color: btn.selectedBg;
+}
+
+.c0 svg {
+  color: fg.muted;
+}
+
+.c0[data-no-visuals] {
+  color: accent.fg;
+}
+
+.c0:has([data-component="ButtonCounter"]) {
+  color: accent.fg;
+}
+
+@media (forced-colors:active) {
+  .c0:focus {
+    outline: solid 1px transparent;
+  }
+}
+
+<button
+  class="c0"
+  data-no-visuals="true"
+  type="button"
+>
+  <span
+    class="c1"
+    data-component="buttonContent"
+  >
+    <span
+      data-component="text"
+    >
+      Invisible
+    </span>
+  </span>
+</button>
+`;
+
+exports[`Button styles primary button appropriately 1`] = `
+.c1 {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c0 {
+  border-radius: 2;
+  border: 1px solid;
+  border-color: btn.primary.border;
+  font-family: inherit;
+  font-weight: semibold;
   font-size: 14px;
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  height: 32px;
+  padding: 0 12px;
+  gap: 8px;
+  min-width: -webkit-max-content;
+  min-width: -moz-max-content;
+  min-width: max-content;
+  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  -webkit-transition-property: color,fill,background-color,border-color;
+  transition-property: color,fill,background-color,border-color;
   color: btn.primary.text;
   background-color: btn.primary.bg;
   box-shadow: undefined;
@@ -643,8 +1718,31 @@ exports[`Button styles primary button appropriately 1`] = `
   outline-offset: -2px;
 }
 
+.c0[href] {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c0[href]:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:hover {
+  -webkit-transition-duration: 80ms;
+  transition-duration: 80ms;
+}
+
+.c0:active {
+  -webkit-transition: none;
+  transition: none;
+}
+
 .c0:disabled {
-  cursor: default;
+  cursor: not-allowed;
+  box-shadow: none;
   color: btn.primary.disabledText;
   background-color: btn.primary.disabledBg;
 }
@@ -653,30 +1751,99 @@ exports[`Button styles primary button appropriately 1`] = `
   color: inherit;
 }
 
-.c0:disabled svg {
-  opacity: 0.6;
+.c0 [data-component=ButtonCounter] {
+  font-size: 14px;
+  background-color: btn.primary.counterBg;
+  color: btn.primary.text;
+}
+
+.c0[data-component=IconButton] {
+  display: inline-grid;
+  padding: unset;
+  place-content: center;
+  width: 32px;
+  min-width: unset;
+}
+
+.c0[data-size="small"] {
+  padding: 0 8px;
+  height: 28px;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.c0[data-size="small"] [data-component="text"] {
+  line-height: calc(20 / 12);
 }
 
-.c0 > :not(:last-child) {
+.c0[data-size="small"] [data-component=ButtonCounter] {
+  font-size: 12px;
+}
+
+.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 4px;
+}
+
+.c0[data-size="small"][data-component=IconButton] {
+  width: 28px;
+  padding: unset;
+}
+
+.c0[data-size="large"] {
+  padding: 0 16px;
+  height: 40px;
+  gap: 8px;
+}
+
+.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0 [data-component="leadingIcon"] {
-  grid-area: leadingIcon;
+.c0[data-size="large"][data-component=IconButton] {
+  width: 40px;
+  padding: unset;
+}
+
+.c0[data-block="block"] {
+  width: 100%;
+}
+
+.c0 [data-component="leadingVisual"] {
+  grid-area: leadingVisual;
 }
 
 .c0 [data-component="text"] {
   grid-area: text;
+  line-height: calc(20/14);
+  white-space: nowrap;
 }
 
-.c0 [data-component="trailingIcon"] {
-  grid-area: trailingIcon;
+.c0 [data-component="trailingVisual"] {
+  grid-area: trailingVisual;
 }
 
-.c0 [data-component=ButtonCounter] {
-  font-size: 14px;
-  background-color: btn.primary.counterBg;
-  color: btn.primary.text;
+.c0 [data-component="trailingAction"] {
+  margin-right: -4px;
+}
+
+.c0 [data-component="buttonContent"] {
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  display: grid;
+  grid-template-areas: "leadingVisual text trailingVisual";
+  grid-template-columns: min-content minmax(0,auto) min-content;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
+.c0 [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 8px;
 }
 
 .c0:hover:not([disabled]) {
@@ -710,12 +1877,18 @@ exports[`Button styles primary button appropriately 1`] = `
 
 <button
   class="c0"
+  data-no-visuals="true"
   type="button"
 >
   <span
-    data-component="text"
+    class="c1"
+    data-component="buttonContent"
   >
-    Primary
+    <span
+      data-component="text"
+    >
+      Primary
+    </span>
   </span>
 </button>
 `;
diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 77849994137..31051ce5700 100644
--- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -630,11 +630,12 @@ exports[`TextInput renders large 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 28px;
   padding-left: 8px;
   padding-right: 8px;
   padding-top: 10px;
   padding-bottom: 10px;
-  font-size: 20px;
+  height: 40px;
   background-repeat: no-repeat;
   background-position: right 8px center;
   padding-left: 0;
@@ -1142,6 +1143,7 @@ exports[`TextInput renders small 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 20px;
   min-height: 28px;
   padding-left: 8px;
   padding-right: 8px;
@@ -1251,22 +1253,18 @@ exports[`TextInput renders small 1`] = `
 
 exports[`TextInput renders trailingAction icon button 1`] = `
 .c2 {
-  margin: 4px;
-}
-
-.c5 {
-  display: inline-block;
+  margin-left: 4px;
+  margin-right: 4px;
+  line-height: 0;
 }
 
 .c4 {
   border-radius: 6px;
-  border: 0;
-  border-color: rgba(27,31,36,0.15);
+  border: 1px solid;
+  border-color: transparent;
   font-family: inherit;
-  font-weight: 600;
-  line-height: 20px;
-  white-space: nowrap;
-  vertical-align: middle;
+  font-weight: 500;
+  font-size: 14px;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -1278,15 +1276,31 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   text-align: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  padding-left: 4px;
-  padding-right: 4px;
-  font-size: 14px;
-  color: #24292f;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  height: 32px;
+  padding: 0 12px;
+  gap: 8px;
+  min-width: -webkit-max-content;
+  min-width: -moz-max-content;
+  min-width: max-content;
+  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  -webkit-transition-property: color,fill,background-color,border-color;
+  transition-property: color,fill,background-color,border-color;
+  color: #0969da;
   background-color: transparent;
   box-shadow: none;
-  position: relative;
 }
 
 .c4:focus:not(:disabled) {
@@ -1305,8 +1319,31 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   outline-offset: -2px;
 }
 
+.c4[href] {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c4[href]:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c4:hover {
+  -webkit-transition-duration: 80ms;
+  transition-duration: 80ms;
+}
+
+.c4:active {
+  -webkit-transition: none;
+  transition: none;
+}
+
 .c4:disabled {
-  cursor: default;
+  cursor: not-allowed;
+  box-shadow: none;
   color: #8c959f;
 }
 
@@ -1314,14 +1351,99 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   color: inherit;
 }
 
-.c4:disabled svg {
-  opacity: 0.6;
-}
-
 .c4 [data-component=ButtonCounter] {
   font-size: 14px;
 }
 
+.c4[data-component=IconButton] {
+  display: inline-grid;
+  padding: unset;
+  place-content: center;
+  width: 32px;
+  min-width: unset;
+}
+
+.c4[data-size="small"] {
+  padding: 0 8px;
+  height: 28px;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.c4[data-size="small"] [data-component="text"] {
+  line-height: calc(20 / 12);
+}
+
+.c4[data-size="small"] [data-component=ButtonCounter] {
+  font-size: 12px;
+}
+
+.c4[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 4px;
+}
+
+.c4[data-size="small"][data-component=IconButton] {
+  width: 28px;
+  padding: unset;
+}
+
+.c4[data-size="large"] {
+  padding: 0 16px;
+  height: 40px;
+  gap: 8px;
+}
+
+.c4[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c4[data-size="large"][data-component=IconButton] {
+  width: 40px;
+  padding: unset;
+}
+
+.c4[data-block="block"] {
+  width: 100%;
+}
+
+.c4 [data-component="leadingVisual"] {
+  grid-area: leadingVisual;
+}
+
+.c4 [data-component="text"] {
+  grid-area: text;
+  line-height: calc(20/14);
+  white-space: nowrap;
+}
+
+.c4 [data-component="trailingVisual"] {
+  grid-area: trailingVisual;
+}
+
+.c4 [data-component="trailingAction"] {
+  margin-right: -4px;
+}
+
+.c4 [data-component="buttonContent"] {
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  display: grid;
+  grid-template-areas: "leadingVisual text trailingVisual";
+  grid-template-columns: min-content minmax(0,auto) min-content;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
+.c4 [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 8px;
+}
+
 .c4:hover:not([disabled]) {
   background-color: #f3f4f6;
 }
@@ -1334,6 +1456,31 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   background-color: hsla(220,14%,94%,1);
 }
 
+.c4 svg {
+  color: #57606a;
+}
+
+.c4[data-no-visuals] {
+  color: #0969da;
+}
+
+.c4:has([data-component="ButtonCounter"]) {
+  color: #0969da;
+}
+
+.c4[data-size="small"][data-no-visuals="true"] {
+  padding-top: 2px;
+  padding-right: 4px;
+  padding-bottom: 2px;
+  padding-left: 4px;
+  position: relative;
+}
+
+.c4[data-size="small"][data-no-visuals="true"][data-component="IconButton"] {
+  width: var(--inner-action-size);
+  height: var(--inner-action-size);
+}
+
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -1654,7 +1801,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 }
 
 @media (pointer:coarse) {
-  .c4:after {
+  .c4[data-size="small"][data-no-visuals="true"]:after {
     content: "";
     position: absolute;
     left: 0;
@@ -1699,36 +1846,36 @@ exports[`TextInput renders trailingAction icon button 1`] = `
       <button
         aria-label="iconLabel"
         className="c4"
+        data-block={null}
+        data-component="IconButton"
+        data-no-visuals={true}
+        data-size="small"
         onClick={[MockFunction]}
         type="button"
       >
-        <span
-          className="c5"
-        >
-          <svg
-            aria-hidden="true"
-            className="octicon octicon-search"
-            fill="currentColor"
-            focusable="false"
-            height={16}
-            role="img"
-            style={
-              {
-                "display": "inline-block",
-                "overflow": "visible",
-                "userSelect": "none",
-                "verticalAlign": "text-bottom",
-              }
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-search"
+          fill="currentColor"
+          focusable="false"
+          height={16}
+          role="img"
+          style={
+            {
+              "display": "inline-block",
+              "overflow": "visible",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
             }
-            viewBox="0 0 16 16"
-            width={16}
-          >
-            <path
-              d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"
-              fillRule="evenodd"
-            />
-          </svg>
-        </span>
+          }
+          viewBox="0 0 16 16"
+          width={16}
+        >
+          <path
+            d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"
+            fillRule="evenodd"
+          />
+        </svg>
       </button>
     </span>
   </span>
@@ -1737,18 +1884,25 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 
 exports[`TextInput renders trailingAction text button 1`] = `
 .c2 {
-  margin: 4px;
+  margin-left: 4px;
+  margin-right: 4px;
+  line-height: 0;
+}
+
+.c4 {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
 }
 
 .c3 {
   border-radius: 6px;
-  border: 0;
-  border-color: rgba(27,31,36,0.15);
+  border: 1px solid;
+  border-color: transparent;
   font-family: inherit;
-  font-weight: 600;
-  line-height: 20px;
-  white-space: nowrap;
-  vertical-align: middle;
+  font-weight: 500;
+  font-size: 14px;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -1760,17 +1914,31 @@ exports[`TextInput renders trailingAction text button 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   text-align: center;
-  display: grid;
-  grid-template-areas: "leadingIcon text trailingIcon";
-  padding-top: 2px;
-  padding-bottom: 2px;
-  padding-left: 4px;
-  padding-right: 4px;
-  font-size: 12px;
-  color: #24292f;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  height: 32px;
+  padding: 0 12px;
+  gap: 8px;
+  min-width: -webkit-max-content;
+  min-width: -moz-max-content;
+  min-width: max-content;
+  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  -webkit-transition-property: color,fill,background-color,border-color;
+  transition-property: color,fill,background-color,border-color;
+  color: #0969da;
   background-color: transparent;
   box-shadow: none;
-  position: relative;
 }
 
 .c3:focus:not(:disabled) {
@@ -1789,8 +1957,31 @@ exports[`TextInput renders trailingAction text button 1`] = `
   outline-offset: -2px;
 }
 
+.c3[href] {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c3[href]:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c3:hover {
+  -webkit-transition-duration: 80ms;
+  transition-duration: 80ms;
+}
+
+.c3:active {
+  -webkit-transition: none;
+  transition: none;
+}
+
 .c3:disabled {
-  cursor: default;
+  cursor: not-allowed;
+  box-shadow: none;
   color: #8c959f;
 }
 
@@ -1798,28 +1989,97 @@ exports[`TextInput renders trailingAction text button 1`] = `
   color: inherit;
 }
 
-.c3:disabled svg {
-  opacity: 0.6;
+.c3 [data-component=ButtonCounter] {
+  font-size: 14px;
+}
+
+.c3[data-component=IconButton] {
+  display: inline-grid;
+  padding: unset;
+  place-content: center;
+  width: 32px;
+  min-width: unset;
+}
+
+.c3[data-size="small"] {
+  padding: 0 8px;
+  height: 28px;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.c3[data-size="small"] [data-component="text"] {
+  line-height: calc(20 / 12);
+}
+
+.c3[data-size="small"] [data-component=ButtonCounter] {
+  font-size: 12px;
+}
+
+.c3[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 4px;
 }
 
-.c3 > :not(:last-child) {
+.c3[data-size="small"][data-component=IconButton] {
+  width: 28px;
+  padding: unset;
+}
+
+.c3[data-size="large"] {
+  padding: 0 16px;
+  height: 40px;
+  gap: 8px;
+}
+
+.c3[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c3 [data-component="leadingIcon"] {
-  grid-area: leadingIcon;
+.c3[data-size="large"][data-component=IconButton] {
+  width: 40px;
+  padding: unset;
+}
+
+.c3[data-block="block"] {
+  width: 100%;
+}
+
+.c3 [data-component="leadingVisual"] {
+  grid-area: leadingVisual;
 }
 
 .c3 [data-component="text"] {
   grid-area: text;
+  line-height: calc(20/14);
+  white-space: nowrap;
 }
 
-.c3 [data-component="trailingIcon"] {
-  grid-area: trailingIcon;
+.c3 [data-component="trailingVisual"] {
+  grid-area: trailingVisual;
 }
 
-.c3 [data-component=ButtonCounter] {
-  font-size: 12px;
+.c3 [data-component="trailingAction"] {
+  margin-right: -4px;
+}
+
+.c3 [data-component="buttonContent"] {
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  display: grid;
+  grid-template-areas: "leadingVisual text trailingVisual";
+  grid-template-columns: min-content minmax(0,auto) min-content;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
+.c3 [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 8px;
 }
 
 .c3:hover:not([disabled]) {
@@ -1834,6 +2094,31 @@ exports[`TextInput renders trailingAction text button 1`] = `
   background-color: hsla(220,14%,94%,1);
 }
 
+.c3 svg {
+  color: #57606a;
+}
+
+.c3[data-no-visuals] {
+  color: #0969da;
+}
+
+.c3:has([data-component="ButtonCounter"]) {
+  color: #0969da;
+}
+
+.c3[data-no-visuals="true"] {
+  padding-top: 2px;
+  padding-right: 4px;
+  padding-bottom: 2px;
+  padding-left: 4px;
+  position: relative;
+}
+
+.c3[data-no-visuals="true"][data-component="IconButton"] {
+  width: var(--inner-action-size);
+  height: var(--inner-action-size);
+}
+
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -1930,7 +2215,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
 }
 
 @media (pointer:coarse) {
-  .c3:after {
+  .c3[data-no-visuals="true"]:after {
     content: "";
     position: absolute;
     left: 0;
@@ -1969,13 +2254,20 @@ exports[`TextInput renders trailingAction text button 1`] = `
   >
     <button
       className="c3"
+      data-block={null}
+      data-no-visuals={true}
       onClick={[MockFunction]}
       type="button"
     >
       <span
-        data-component="text"
+        className="c4"
+        data-component="buttonContent"
       >
-        Clear
+        <span
+          data-component="text"
+        >
+          Clear
+        </span>
       </span>
     </button>
   </span>
@@ -1984,18 +2276,25 @@ exports[`TextInput renders trailingAction text button 1`] = `
 
 exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 .c2 {
-  margin: 4px;
+  margin-left: 4px;
+  margin-right: 4px;
+  line-height: 0;
+}
+
+.c5 {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
 }
 
 .c4 {
   border-radius: 6px;
-  border: 0;
-  border-color: rgba(27,31,36,0.15);
+  border: 1px solid;
+  border-color: transparent;
   font-family: inherit;
-  font-weight: 600;
-  line-height: 20px;
-  white-space: nowrap;
-  vertical-align: middle;
+  font-weight: 500;
+  font-size: 14px;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -2007,17 +2306,31 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   text-align: center;
-  display: grid;
-  grid-template-areas: "leadingIcon text trailingIcon";
-  padding-top: 2px;
-  padding-bottom: 2px;
-  padding-left: 4px;
-  padding-right: 4px;
-  font-size: 12px;
-  color: #24292f;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  height: 32px;
+  padding: 0 12px;
+  gap: 8px;
+  min-width: -webkit-max-content;
+  min-width: -moz-max-content;
+  min-width: max-content;
+  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  transition: 80ms cubic-bezier(0.65,0,0.35,1);
+  -webkit-transition-property: color,fill,background-color,border-color;
+  transition-property: color,fill,background-color,border-color;
+  color: #0969da;
   background-color: transparent;
   box-shadow: none;
-  position: relative;
 }
 
 .c4:focus:not(:disabled) {
@@ -2036,8 +2349,31 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   outline-offset: -2px;
 }
 
+.c4[href] {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c4[href]:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c4:hover {
+  -webkit-transition-duration: 80ms;
+  transition-duration: 80ms;
+}
+
+.c4:active {
+  -webkit-transition: none;
+  transition: none;
+}
+
 .c4:disabled {
-  cursor: default;
+  cursor: not-allowed;
+  box-shadow: none;
   color: #8c959f;
 }
 
@@ -2045,28 +2381,97 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   color: inherit;
 }
 
-.c4:disabled svg {
-  opacity: 0.6;
+.c4 [data-component=ButtonCounter] {
+  font-size: 14px;
+}
+
+.c4[data-component=IconButton] {
+  display: inline-grid;
+  padding: unset;
+  place-content: center;
+  width: 32px;
+  min-width: unset;
+}
+
+.c4[data-size="small"] {
+  padding: 0 8px;
+  height: 28px;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.c4[data-size="small"] [data-component="text"] {
+  line-height: calc(20 / 12);
+}
+
+.c4[data-size="small"] [data-component=ButtonCounter] {
+  font-size: 12px;
+}
+
+.c4[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 4px;
+}
+
+.c4[data-size="small"][data-component=IconButton] {
+  width: 28px;
+  padding: unset;
+}
+
+.c4[data-size="large"] {
+  padding: 0 16px;
+  height: 40px;
+  gap: 8px;
 }
 
-.c4 > :not(:last-child) {
+.c4[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c4 [data-component="leadingIcon"] {
-  grid-area: leadingIcon;
+.c4[data-size="large"][data-component=IconButton] {
+  width: 40px;
+  padding: unset;
+}
+
+.c4[data-block="block"] {
+  width: 100%;
+}
+
+.c4 [data-component="leadingVisual"] {
+  grid-area: leadingVisual;
 }
 
 .c4 [data-component="text"] {
   grid-area: text;
+  line-height: calc(20/14);
+  white-space: nowrap;
 }
 
-.c4 [data-component="trailingIcon"] {
-  grid-area: trailingIcon;
+.c4 [data-component="trailingVisual"] {
+  grid-area: trailingVisual;
 }
 
-.c4 [data-component=ButtonCounter] {
-  font-size: 12px;
+.c4 [data-component="trailingAction"] {
+  margin-right: -4px;
+}
+
+.c4 [data-component="buttonContent"] {
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  display: grid;
+  grid-template-areas: "leadingVisual text trailingVisual";
+  grid-template-columns: min-content minmax(0,auto) min-content;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
+.c4 [data-component="buttonContent"] > :not(:last-child) {
+  margin-right: 8px;
 }
 
 .c4:hover:not([disabled]) {
@@ -2081,6 +2486,31 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   background-color: hsla(220,14%,94%,1);
 }
 
+.c4 svg {
+  color: #57606a;
+}
+
+.c4[data-no-visuals] {
+  color: #0969da;
+}
+
+.c4:has([data-component="ButtonCounter"]) {
+  color: #0969da;
+}
+
+.c4[data-no-visuals="true"] {
+  padding-top: 2px;
+  padding-right: 4px;
+  padding-bottom: 2px;
+  padding-left: 4px;
+  position: relative;
+}
+
+.c4[data-no-visuals="true"][data-component="IconButton"] {
+  width: var(--inner-action-size);
+  height: var(--inner-action-size);
+}
+
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -2402,7 +2832,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 }
 
 @media (pointer:coarse) {
-  .c4:after {
+  .c4[data-no-visuals="true"]:after {
     content: "";
     position: absolute;
     left: 0;
@@ -2446,13 +2876,20 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
     >
       <button
         className="c4"
+        data-block={null}
+        data-no-visuals={true}
         onClick={[MockFunction]}
         type="button"
       >
         <span
-          data-component="text"
+          className="c5"
+          data-component="buttonContent"
         >
-          Clear
+          <span
+            data-component="text"
+          >
+            Clear
+          </span>
         </span>
       </button>
     </span>
@@ -4761,6 +5198,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 20px;
   min-height: 28px;
   padding-left: 8px;
   padding-right: 8px;
@@ -5355,11 +5793,12 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 28px;
   padding-left: 8px;
   padding-right: 8px;
   padding-top: 10px;
   padding-bottom: 10px;
-  font-size: 20px;
+  height: 40px;
   background-repeat: no-repeat;
   background-position: right 8px center;
   padding-left: 12px;
diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index d7f6f64a4e8..7d484ce9385 100644
--- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -58,6 +58,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -800,6 +801,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -1211,6 +1213,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
+  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -1393,6 +1396,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -2080,6 +2084,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 20px;
   min-height: 28px;
   padding-left: 8px;
   padding-right: 8px;
@@ -2192,8 +2197,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   line-height: 16px;
   padding-left: 4px;
   padding-right: 4px;
-  padding-top: 0;
-  padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
@@ -2770,6 +2773,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 20px;
   min-height: 28px;
   padding-left: 8px;
   padding-right: 8px;
@@ -2882,8 +2886,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   line-height: 20px;
   padding-left: 8px;
   padding-right: 8px;
-  padding-top: 0;
-  padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
@@ -3460,6 +3462,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -3565,8 +3568,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   line-height: 24px;
   padding-left: 8px;
   padding-right: 8px;
-  padding-top: 0;
-  padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
@@ -4143,6 +4144,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -4826,6 +4828,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -5509,6 +5512,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -6194,6 +6198,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -6594,6 +6599,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -7332,6 +7338,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -8102,6 +8109,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -8849,6 +8857,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -9666,6 +9675,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -10483,6 +10493,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -11294,6 +11305,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -12073,6 +12085,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -12884,6 +12897,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -13672,6 +13686,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 20px;
   min-height: 28px;
   padding-left: 8px;
   padding-right: 8px;
@@ -13784,8 +13799,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   line-height: 16px;
   padding-left: 4px;
   padding-right: 4px;
-  padding-top: 0;
-  padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
@@ -14537,6 +14550,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -15395,6 +15409,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -15500,8 +15515,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   line-height: 24px;
   padding-left: 8px;
   padding-right: 8px;
-  padding-top: 0;
-  padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
@@ -16219,6 +16232,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -16902,6 +16916,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
@@ -17592,6 +17607,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  --inner-action-size: 24px;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);
diff --git a/src/__tests__/__snapshots__/Token.test.tsx.snap b/src/__tests__/__snapshots__/Token.test.tsx.snap
index 34f4e562d7d..b81c6ee9d79 100644
--- a/src/__tests__/__snapshots__/Token.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Token.test.tsx.snap
@@ -42,8 +42,6 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
   line-height: 16px;
   padding-left: 4px;
   padding-right: 4px;
-  padding-top: 0;
-  padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
@@ -252,8 +250,6 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
   line-height: 20px;
   padding-left: 8px;
   padding-right: 8px;
-  padding-top: 0;
-  padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
@@ -462,8 +458,6 @@ exports[`Token components AvatarToken renders all sizes 3`] = `
   line-height: 24px;
   padding-left: 8px;
   padding-right: 8px;
-  padding-top: 0;
-  padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
@@ -1073,8 +1067,6 @@ exports[`Token components AvatarToken renders consistently 1`] = `
   line-height: 20px;
   padding-left: 8px;
   padding-right: 8px;
-  padding-top: 0;
-  padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
@@ -1175,8 +1167,6 @@ exports[`Token components AvatarToken renders isSelected 1`] = `
   line-height: 20px;
   padding-left: 8px;
   padding-right: 8px;
-  padding-top: 0;
-  padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
   border-color: #24292f;
   border-style: solid;
@@ -1303,8 +1293,6 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
   line-height: 20px;
   padding-left: 8px;
   padding-right: 8px;
-  padding-top: 0;
-  padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
@@ -1494,8 +1482,6 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = `
   line-height: 16px;
   padding-left: 4px;
   padding-right: 4px;
-  padding-top: 0;
-  padding-bottom: 0;
   --label-r: 153;
   --label-g: 153;
   --label-b: 153;
@@ -1672,8 +1658,6 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = `
   line-height: 20px;
   padding-left: 8px;
   padding-right: 8px;
-  padding-top: 0;
-  padding-bottom: 0;
   --label-r: 153;
   --label-g: 153;
   --label-b: 153;
@@ -1850,8 +1834,6 @@ exports[`Token components IssueLabelToken renders all sizes 3`] = `
   line-height: 24px;
   padding-left: 8px;
   padding-right: 8px;
-  padding-top: 0;
-  padding-bottom: 0;
   --label-r: 153;
   --label-g: 153;
   --label-b: 153;
@@ -2384,8 +2366,6 @@ exports[`Token components IssueLabelToken renders consistently 1`] = `
   line-height: 20px;
   padding-left: 8px;
   padding-right: 8px;
-  padding-top: 0;
-  padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
@@ -2467,8 +2447,6 @@ exports[`Token components IssueLabelToken renders custom fill color 1`] = `
   line-height: 20px;
   padding-left: 8px;
   padding-right: 8px;
-  padding-top: 0;
-  padding-bottom: 0;
   --label-r: 3;
   --label-g: 102;
   --label-b: 214;
@@ -2645,8 +2623,6 @@ exports[`Token components IssueLabelToken renders default fill color 1`] = `
   line-height: 20px;
   padding-left: 8px;
   padding-right: 8px;
-  padding-top: 0;
-  padding-bottom: 0;
   --label-r: 153;
   --label-g: 153;
   --label-b: 153;
@@ -2823,8 +2799,6 @@ exports[`Token components IssueLabelToken renders isSelected 1`] = `
   line-height: 20px;
   padding-left: 8px;
   padding-right: 8px;
-  padding-top: 0;
-  padding-bottom: 0;
   --label-r: 153;
   --label-g: 153;
   --label-b: 153;
@@ -2937,8 +2911,6 @@ exports[`Token components IssueLabelToken renders with a remove button 1`] = `
   line-height: 20px;
   padding-left: 8px;
   padding-right: 8px;
-  padding-top: 0;
-  padding-bottom: 0;
   --label-r: 153;
   --label-g: 153;
   --label-b: 153;
@@ -3115,8 +3087,6 @@ exports[`Token components Token renders all sizes 1`] = `
   line-height: 16px;
   padding-left: 4px;
   padding-right: 4px;
-  padding-top: 0;
-  padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
@@ -3282,8 +3252,6 @@ exports[`Token components Token renders all sizes 2`] = `
   line-height: 20px;
   padding-left: 8px;
   padding-right: 8px;
-  padding-top: 0;
-  padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
@@ -3449,8 +3417,6 @@ exports[`Token components Token renders all sizes 3`] = `
   line-height: 24px;
   padding-left: 8px;
   padding-right: 8px;
-  padding-top: 0;
-  padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
@@ -3950,8 +3916,6 @@ exports[`Token components Token renders consistently 1`] = `
   line-height: 20px;
   padding-left: 8px;
   padding-right: 8px;
-  padding-top: 0;
-  padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
@@ -4033,8 +3997,6 @@ exports[`Token components Token renders isSelected 1`] = `
   line-height: 20px;
   padding-left: 8px;
   padding-right: 8px;
-  padding-top: 0;
-  padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
   border-color: #24292f;
   border-style: solid;
@@ -4126,8 +4088,6 @@ exports[`Token components Token renders with a leadingVisual 1`] = `
   line-height: 20px;
   padding-left: 8px;
   padding-right: 8px;
-  padding-top: 0;
-  padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
@@ -4222,8 +4182,6 @@ exports[`Token components Token renders with a remove button 1`] = `
   line-height: 20px;
   padding-left: 8px;
   padding-right: 8px;
-  padding-top: 0;
-  padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
diff --git a/src/drafts/MarkdownEditor/Toolbar.tsx b/src/drafts/MarkdownEditor/Toolbar.tsx
index 1b8e1d59441..ccf37a44ba0 100644
--- a/src/drafts/MarkdownEditor/Toolbar.tsx
+++ b/src/drafts/MarkdownEditor/Toolbar.tsx
@@ -27,6 +27,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, IconButtonProps>((pro
 
   return (
     <IconButton
+      size="small"
       ref={ref}
       variant="invisible"
       disabled={disabled}
diff --git a/src/stories/ActionMenu/examples.stories.tsx b/src/stories/ActionMenu/examples.stories.tsx
index 55e9628e040..7cd400623cc 100644
--- a/src/stories/ActionMenu/examples.stories.tsx
+++ b/src/stories/ActionMenu/examples.stories.tsx
@@ -89,7 +89,7 @@ export function SingleSelection(): JSX.Element {
       <p>This pattern has a single section with the selected value shown in the button</p>
 
       <ActionMenu>
-        <ActionMenu.Button aria-label="Field type" leadingIcon={selectedType.icon}>
+        <ActionMenu.Button aria-label="Field type" leadingIcon={selectedType.icon} alignContent="start">
           {selectedType.name}
         </ActionMenu.Button>
         <ActionMenu.Overlay width="medium">
@@ -122,7 +122,7 @@ export function SingleSelectionWithPlaceholder(): JSX.Element {
       <p>This pattern has a placeholder in menu button when no value is selected yet</p>
 
       <ActionMenu>
-        <ActionMenu.Button aria-label="Field type" leadingIcon={selectedType.icon}>
+        <ActionMenu.Button aria-label="Field type" leadingIcon={selectedType.icon} alignContent="start">
           {selectedType.name || 'Pick a field type'}
         </ActionMenu.Button>
         <ActionMenu.Overlay width="medium">
@@ -159,14 +159,6 @@ export function GroupsAndDescription(): JSX.Element {
             aria-describedby="selected-milestone"
             variant="invisible"
             trailingIcon={GearIcon}
-            sx={{
-              color: 'fg.muted',
-              width: '100%',
-              paddingX: 0,
-              gridTemplateColumns: 'min-content 1fr min-content',
-              textAlign: 'left',
-              ':hover, :focus, &[aria-expanded=true]': {background: 'none !important', color: 'accent.fg'},
-            }}
           >
             Milestone
           </ActionMenu.Button>
@@ -251,25 +243,14 @@ export function MultipleSelection(): JSX.Element {
 
       <Box sx={{width: 200}}>
         <ActionMenu>
-          <ActionMenu.Button
-            aria-label="Assignees"
-            variant="invisible"
-            trailingIcon={GearIcon}
-            sx={{
-              color: 'fg.muted',
-              width: '100%',
-              paddingX: 0,
-              gridTemplateColumns: 'min-content 1fr min-content',
-              textAlign: 'left',
-              ':hover, :focus, &[aria-expanded=true]': {background: 'none !important', color: 'accent.fg'},
-            }}
-          >
+          <ActionMenu.Button variant="invisible" trailingIcon={GearIcon}>
             Assignees
           </ActionMenu.Button>
           <ActionMenu.Overlay>
             <ActionList selectionVariant="multiple" showDividers>
               {users.map(user => (
                 <ActionList.Item
+                  aria-label="Assignees"
                   key={user.login}
                   selected={Boolean(assignees.find(assignee => assignee.login === user.login))}
                   onSelect={() => toggleAssignee(user)}
diff --git a/src/stories/ActionMenu/fixtures.stories.tsx b/src/stories/ActionMenu/fixtures.stories.tsx
index 2125fbcc3b8..f40e78a9714 100644
--- a/src/stories/ActionMenu/fixtures.stories.tsx
+++ b/src/stories/ActionMenu/fixtures.stories.tsx
@@ -297,7 +297,12 @@ export function MemexTableMenu(): JSX.Element {
 
         <ActionMenu open={open} onOpenChange={setOpen}>
           <ActionMenu.Anchor>
-            <IconButton icon={TriangleDownIcon} aria-label="Open Estimate column options menu" sx={{padding: 0}} />
+            <IconButton
+              size="small"
+              icon={TriangleDownIcon}
+              aria-label="Open Estimate column options menu"
+              sx={{padding: 0}}
+            />
           </ActionMenu.Anchor>
 
           <ActionMenu.Overlay onClickOutside={handleClickOutside}>
@@ -380,14 +385,9 @@ const ViewChangeButtons = ({setOpen}: {setOpen: (open: boolean) => void}) => (
         flex: 'auto',
         minWidth: '50%',
         borderRight: '1px solid',
-        borderColor: 'border.default',
         borderRadius: 0,
         mt: -2,
         mb: -2,
-        py: 3,
-        '&:hover': {
-          bg: 'canvas.inset',
-        },
       }}
     >
       Save changes
@@ -402,11 +402,6 @@ const ViewChangeButtons = ({setOpen}: {setOpen: (open: boolean) => void}) => (
         borderRadius: 0,
         mt: -2,
         mb: -2,
-        py: 3,
-        fontWeight: 'normal',
-        '&:hover': {
-          bg: 'canvas.inset',
-        },
       }}
     >
       Discard changes
@@ -427,14 +422,7 @@ export function MemexViewOptionsMenu(): JSX.Element {
         </Text>
         <ActionMenu open={open} onOpenChange={setOpen}>
           <ActionMenu.Anchor aria-label="Open View options menu">
-            <IconButton
-              icon={TriangleDownIcon}
-              sx={{
-                padding: '0 1px',
-                lineHeight: '18px',
-              }}
-              aria-label="Open View options menu"
-            />
+            <IconButton icon={TriangleDownIcon} size="small" aria-label="Open View options menu" />
           </ActionMenu.Anchor>
 
           <ActionMenu.Overlay width="medium">
@@ -519,15 +507,7 @@ export function MemexIteration(): JSX.Element {
       <h1>Memex Iteration Menu</h1>
 
       <ActionMenu>
-        <ActionMenu.Button
-          variant="invisible"
-          sx={{
-            fontWeight: 'normal',
-            color: 'fg.muted',
-            ':hover, :focus': {background: 'none !important', color: 'accent.fg'},
-          }}
-          aria-label="Iteration duration"
-        >
+        <ActionMenu.Button variant="invisible" aria-label="Iteration duration">
           {duration} {duration > 1 ? 'weeks' : 'week'}
         </ActionMenu.Button>
         <ActionMenu.Overlay width="medium">
@@ -568,14 +548,7 @@ export function MemexAddColumn(): JSX.Element {
           <TextInput defaultValue="Estimate" aria-label="Field Name" sx={{mb: 2}} />
         </FormControl>
         <ActionMenu>
-          <ActionMenu.Button
-            aria-label="Field type"
-            leadingIcon={selectedType.icon}
-            sx={{
-              gridTemplateColumns: 'min-content 1fr min-content',
-              '[data-component="text"]': {textAlign: 'left'},
-            }}
-          >
+          <ActionMenu.Button aria-label="Field type" leadingIcon={selectedType.icon} alignContent="start">
             {selectedType.name}
           </ActionMenu.Button>
           <ActionMenu.Overlay width="medium">
@@ -603,17 +576,7 @@ export function MemexAddColumn(): JSX.Element {
           <TextInput id="duration" type="number" defaultValue="2" sx={{width: '6ch'}} />
 
           <ActionMenu>
-            <ActionMenu.Button
-              id="duration"
-              aria-label="Field type"
-              sx={{
-                textAlign: 'left',
-                ml: 2,
-                flexGrow: 1,
-                gridTemplateColumns: 'min-content 1fr min-content',
-                '[data-component="text"]': {textAlign: 'left'},
-              }}
-            >
+            <ActionMenu.Button id="duration" aria-label="Field type" alignContent="start">
               {durationUnit}
             </ActionMenu.Button>
             <ActionMenu.Overlay width="medium">
@@ -665,7 +628,6 @@ export function MemexKeyboardShortcut(): JSX.Element {
           onClick={() => setOpen(!open)}
           icon={TriangleDownIcon}
           aria-label="Open Estimate column options menu"
-          sx={{padding: 0}}
         />
 
         <ActionMenu open={open} onOpenChange={setOpen} anchorRef={anchorRef}>
diff --git a/src/stories/Overlay.stories.tsx b/src/stories/Overlay.stories.tsx
index cbce193e198..66f7e0e4e6c 100644
--- a/src/stories/Overlay.stories.tsx
+++ b/src/stories/Overlay.stories.tsx
@@ -5,6 +5,7 @@ import {
   Overlay,
   ButtonGroup,
   Button,
+  IconButton,
   Text,
   Box,
   Checkbox,
@@ -195,14 +196,12 @@ export const MemexNestedOverlays = () => {
     <div>
       <ButtonGroup>
         <Button>Add iteration</Button>
-        <Button
+        <IconButton
           aria-label="Add custom iteration"
           ref={buttonRef}
           onClick={() => setOverlayOpen(!overlayOpen)}
-          sx={{paddingX: 2}}
-        >
-          <TriangleDownIcon />
-        </Button>
+          icon={TriangleDownIcon}
+        />
       </ButtonGroup>
       {overlayOpen && (
         <Overlay
@@ -269,14 +268,12 @@ export const NestedOverlays = () => {
       </div>
       <ButtonGroup>
         <Button>Star</Button>
-        <Button
+        <IconButton
           aria-label="Add this repository to a list"
           ref={buttonRef}
           onClick={() => setListOverlayOpen(!listOverlayOpen)}
-          sx={{paddingX: 2}}
-        >
-          <TriangleDownIcon />
-        </Button>
+          icon={TriangleDownIcon}
+        />
       </ButtonGroup>
       {listOverlayOpen && (
         <Overlay
diff --git a/src/stories/SelectPanel.stories.tsx b/src/stories/SelectPanel.stories.tsx
index 509e2e47970..9cbb97a008d 100644
--- a/src/stories/SelectPanel.stories.tsx
+++ b/src/stories/SelectPanel.stories.tsx
@@ -70,7 +70,7 @@ export function MultiSelectStory(): JSX.Element {
       <div>Please select labels that describe your issue:</div>
       <SelectPanel
         renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <Button trailingIcon={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
             {children ?? 'Select Labels'}
           </Button>
         )}
@@ -101,7 +101,7 @@ export function SingleSelectStory(): JSX.Element {
       <div>Please select a label that describe your issue:</div>
       <SelectPanel
         renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <Button trailingIcon={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
             {children ?? 'Select Labels'}
           </Button>
         )}
@@ -130,7 +130,7 @@ export function ExternalAnchorStory(): JSX.Element {
   return (
     <>
       <h1>Select Panel With External Anchor</h1>
-      <Button trailingIcon={TriangleDownIcon} ref={buttonRef} onClick={() => setOpen(!open)}>
+      <Button trailingAction={TriangleDownIcon} ref={buttonRef} onClick={() => setOpen(!open)}>
         Custom: {selected?.text || 'Click Me'}
       </Button>
       <SelectPanel
@@ -163,7 +163,7 @@ export function SelectPanelHeightInitialWithOverflowingItemsStory(): JSX.Element
       <div>Please select a label that describe your issue:</div>
       <SelectPanel
         renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <Button trailingIcon={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
             {children ?? 'Select Labels'}
           </Button>
         )}
@@ -195,7 +195,7 @@ export function SelectPanelHeightInitialWithUnderflowingItemsStory(): JSX.Elemen
       <div>Please select a label that describe your issue:</div>
       <SelectPanel
         renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <Button trailingIcon={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
             {children ?? 'Select Labels'}
           </Button>
         )}
@@ -239,7 +239,7 @@ export function SelectPanelHeightInitialWithUnderflowingItemsAfterFetch(): JSX.E
       <div>Please select a label that describe your issue:</div>
       <SelectPanel
         renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <Button trailingIcon={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
             {children ?? 'Select Labels'}
           </Button>
         )}
@@ -272,7 +272,7 @@ export function SelectPanelAboveTallBody(): JSX.Element {
       <div>Please select a label that describe your issue:</div>
       <SelectPanel
         renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <Button trailingIcon={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
             {children ?? 'Select Labels'}
           </Button>
         )}
@@ -314,7 +314,7 @@ export function SelectPanelHeightAndScroll(): JSX.Element {
       <h2>With height:medium</h2>
       <SelectPanel
         renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <Button trailingIcon={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
             {children ?? 'Select Labels'}
           </Button>
         )}
@@ -331,7 +331,7 @@ export function SelectPanelHeightAndScroll(): JSX.Element {
       <h2>With height:auto, maxheight:medium</h2>
       <SelectPanel
         renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <Button trailingIcon={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
             {children ?? 'Select Labels'}
           </Button>
         )}