diff --git a/.changeset/angry-spoons-grin.md b/.changeset/angry-spoons-grin.md
deleted file mode 100644
index c49e3e0e8ca..00000000000
--- a/.changeset/angry-spoons-grin.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-"@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/.changeset/odd-wasps-breathe.md b/.changeset/odd-wasps-breathe.md
new file mode 100644
index 00000000000..a4aed0720f1
--- /dev/null
+++ b/.changeset/odd-wasps-breathe.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Button: Revert new enhancement due to introducing major styling changes
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 96fa576cb44..4d46967ddff 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 95fc456b5a1..7c279cae7cf 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 023f76c77f7..269fa7e9bc1 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 83a20efc55d..aafe2d94635 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 83a20efc55d..aafe2d94635 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 0a0d7b132f4..768d375e76f 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 dae7d216dbd..a51421a63d0 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 9e2ca27cf01..a9478d40c75 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 9e2ca27cf01..a9478d40c75 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 e3d5a91a66b..09fca2c6b20 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 56d48dbc00a..80e8ad1fcac 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 857e7d3bc0c..2b7eecc23d7 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 e3d5a91a66b..09fca2c6b20 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 e3d5a91a66b..09fca2c6b20 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 5762cf818cd..9a6e7d2477b 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 cd7ea93d91a..27bffd473f7 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 5762cf818cd..9a6e7d2477b 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 5762cf818cd..9a6e7d2477b 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 1a6f14f4040..7e6709c4fa9 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 29cde67f322..c05ad07b61e 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 8b9f8c96d23..08d492a3a67 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 29cde67f322..c05ad07b61e 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 29cde67f322..c05ad07b61e 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 3eeceac5f96..6da539b28fd 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 4b7ff48113a..e0bf05aa9e6 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 ea3f43522f6..b79bdd43ac2 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 3eeceac5f96..6da539b28fd 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 3eeceac5f96..6da539b28fd 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 8ca573d8cb9..d45ffd005a8 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 cadeebdeb0a..c5d60926a9f 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 8ca573d8cb9..d45ffd005a8 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 8ca573d8cb9..d45ffd005a8 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 afd7b05b4c9..40a0c859db8 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 d35df7a4ec0..ca1b5b17751 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 3eba9aac4ad..5f38391c8cc 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 afd7b05b4c9..40a0c859db8 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 afd7b05b4c9..40a0c859db8 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 3a8fb2fe2f0..6970fb25932 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 884474df496..f073bec60e3 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 3a8fb2fe2f0..6970fb25932 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 3a8fb2fe2f0..6970fb25932 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 36d2a45986e..bcb81af0467 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 6af5e736bb0..9ff68751dab 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 9c595667f02..b79587f4afe 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 36d2a45986e..bcb81af0467 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 36d2a45986e..bcb81af0467 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 d45c0170307..093d2de4152 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 b533d6b9181..fc2901cc27b 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 d45c0170307..093d2de4152 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 d45c0170307..093d2de4152 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 e3d5a91a66b..09fca2c6b20 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 56d48dbc00a..80e8ad1fcac 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 857e7d3bc0c..2b7eecc23d7 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 e3d5a91a66b..09fca2c6b20 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 e3d5a91a66b..09fca2c6b20 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 5762cf818cd..9a6e7d2477b 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 cd7ea93d91a..27bffd473f7 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 5762cf818cd..9a6e7d2477b 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 5762cf818cd..9a6e7d2477b 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 aa0f3d2ac3a..37a4bdfe8be 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 e331fe785f4..e4081923124 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 35074bda2ab..379f2bd5aa1 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 aa0f3d2ac3a..37a4bdfe8be 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 aa0f3d2ac3a..37a4bdfe8be 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 e3f7ea01ccd..9893ec21912 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 cbdddbc1c78..e4cdf292d82 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 e3f7ea01ccd..9893ec21912 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 e3f7ea01ccd..9893ec21912 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 e3d5a91a66b..09fca2c6b20 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 56d48dbc00a..80e8ad1fcac 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 857e7d3bc0c..2b7eecc23d7 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 e3d5a91a66b..09fca2c6b20 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 e3d5a91a66b..09fca2c6b20 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 5762cf818cd..9a6e7d2477b 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 cd7ea93d91a..27bffd473f7 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 5762cf818cd..9a6e7d2477b 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 5762cf818cd..9a6e7d2477b 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 dc4d05ce9d9..0163734217f 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 6c6ae9fa1db..549458e0684 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 5244e303e67..baa9f12ddb8 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 3d0da735bb5..9b4f6a6ddcd 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 dc4d05ce9d9..0163734217f 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 74e72ecb972..e1f9cc0742e 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 cf8968e0ee4..22cca92d77c 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 9687ccc31e3..244bcebe27f 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 74e72ecb972..e1f9cc0742e 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 aff81a49101..6a72a96baf1 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 98b02c72117..a52a6610793 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 ecd451e4315..a722086fbdd 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 aff81a49101..6a72a96baf1 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 aff81a49101..6a72a96baf1 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 c8f16253757..0bffaa41c89 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 ac720db602f..c469395bc1d 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 c8f16253757..0bffaa41c89 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 c8f16253757..0bffaa41c89 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 356e04c2210..26296728bb7 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 04cb590fdb1..7ca9111cd62 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 f72ac95fbdc..6252315f7e2 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 356e04c2210..26296728bb7 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 356e04c2210..26296728bb7 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 d464f75c686..dea638e1509 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 6d0cb868d34..d92dd05d7ef 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 d464f75c686..dea638e1509 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 d464f75c686..dea638e1509 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 4adbcaec3f6..6b6c693667c 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 f8dd68d36b7..4fb4f267546 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 8573decbf32..aebe0f9fcc6 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 4adbcaec3f6..6b6c693667c 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 4adbcaec3f6..6b6c693667c 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 df418e1287e..6c68fb0861b 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 c248ed1477b..966331ec746 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 df418e1287e..6c68fb0861b 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 df418e1287e..6c68fb0861b 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 6a55bdbc3da..433609dca4d 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 586cb674645..120aa345f9f 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 b14da3e70a9..ff5034030b4 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 826dcbe317c..1c46911a8b7 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 826dcbe317c..1c46911a8b7 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 793470f7336..4308eaffc14 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 15f9ce580a9..fea7b78c2ab 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 e5b2cd2c3c1..b784eb66ff2 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 e5b2cd2c3c1..b784eb66ff2 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 bfb639b452a..f7c84f36e51 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 ff04b3df460..4b37bcd228c 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 cddbb49a1e7..d1a17b9413e 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 bfb639b452a..f7c84f36e51 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 bfb639b452a..f7c84f36e51 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 3bff066a6e6..4f122c9dc18 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 19e532ea5a5..5e39ccd261b 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 3bff066a6e6..4f122c9dc18 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 3bff066a6e6..4f122c9dc18 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 7f72da8c56b..21a7ebe4abb 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 984abb1ac67..4effbfa23a5 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 4f2b362c34e..1a3cceaa3bf 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 984abb1ac67..4effbfa23a5 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 984abb1ac67..4effbfa23a5 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 3c89e9aac8d..60c491f81b7 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 97c5f0ea65a..6f38300c227 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 ec2a1049610..88d04cb1f5b 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 97c5f0ea65a..6f38300c227 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 97c5f0ea65a..6f38300c227 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 9e92cd80071..98c36810154 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 503daaa904a..fa494b8694f 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 4c310c1aaf6..77d4d3b0e1c 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 9e92cd80071..98c36810154 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 9e92cd80071..98c36810154 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 b3a1d296bc9..7def6954541 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 cb1306297ef..704b01b094d 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 b3a1d296bc9..7def6954541 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 b3a1d296bc9..7def6954541 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 bfb639b452a..f7c84f36e51 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 ff04b3df460..4b37bcd228c 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 cddbb49a1e7..d1a17b9413e 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 bfb639b452a..f7c84f36e51 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 bfb639b452a..f7c84f36e51 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 3bff066a6e6..4f122c9dc18 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 19e532ea5a5..5e39ccd261b 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 3bff066a6e6..4f122c9dc18 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 3bff066a6e6..4f122c9dc18 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 678cdcf2d27..731730d9667 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 79c93e143b8..254594eaadd 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 4250d1c091a..b000d2bc440 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 678cdcf2d27..731730d9667 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 678cdcf2d27..731730d9667 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 8eb9badcadc..84d98d97639 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 23381372f26..c77dcec1007 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 8eb9badcadc..84d98d97639 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 8eb9badcadc..84d98d97639 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 dc3108c09ee..6d9dbbce002 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 7c6b3814da3..66e90591a89 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 d7ad996b931..94d314ee459 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 6fcf6cf59d2..61de8c65f7b 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 dc3108c09ee..6d9dbbce002 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 3130880f414..8c49c3fb0c8 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 c5fc4c3b9ef..85322075097 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 99ea9dbbc7b..765bdc62f5d 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 3130880f414..8c49c3fb0c8 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 2df76363b9e..f5a41634dfc 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 30fd2166025..19edd517990 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 d9ec0633683..112344da934 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 2df76363b9e..f5a41634dfc 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 2df76363b9e..f5a41634dfc 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 8fd56f3cd51..503dd559d71 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 037a71cdda5..d73e0b30b8a 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 8fd56f3cd51..503dd559d71 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 8fd56f3cd51..503dd559d71 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 96fa576cb44..8e9a8cefb04 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 95fc456b5a1..6efca82d383 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 023f76c77f7..cc36b544690 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 83a20efc55d..5540f5e343c 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 83a20efc55d..5540f5e343c 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 0a0d7b132f4..2fd09ce5d84 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 dae7d216dbd..7581948193a 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 9e2ca27cf01..19973323ad1 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 9e2ca27cf01..19973323ad1 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 e3d5a91a66b..dc5f0f4b5c1 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 56d48dbc00a..e2d54cd3a16 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 857e7d3bc0c..a4038ddb289 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 e3d5a91a66b..dc5f0f4b5c1 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 e3d5a91a66b..dc5f0f4b5c1 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 5762cf818cd..4137438612b 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 cd7ea93d91a..dbf94992df7 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 5762cf818cd..4137438612b 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 5762cf818cd..4137438612b 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 3eeceac5f96..96491afdfc6 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 4b7ff48113a..1a11b62dbbe 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 ea3f43522f6..36cf32ee771 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 3eeceac5f96..96491afdfc6 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 3eeceac5f96..96491afdfc6 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 8ca573d8cb9..3011b428e1f 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 cadeebdeb0a..d274a98d639 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 8ca573d8cb9..3011b428e1f 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 8ca573d8cb9..3011b428e1f 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 afd7b05b4c9..da4f705945e 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 d35df7a4ec0..15651ab92f0 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 3eba9aac4ad..60370b7d94c 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 afd7b05b4c9..da4f705945e 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 afd7b05b4c9..da4f705945e 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 3a8fb2fe2f0..7dee981476c 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 884474df496..ccffbdd3377 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 3a8fb2fe2f0..7dee981476c 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 3a8fb2fe2f0..7dee981476c 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 36d2a45986e..974631b9b5e 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 6af5e736bb0..5cec6060501 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 9c595667f02..434329e791a 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 36d2a45986e..974631b9b5e 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 36d2a45986e..974631b9b5e 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 d45c0170307..7f23cee775f 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 b533d6b9181..7a23732c0d9 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 d45c0170307..7f23cee775f 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 d45c0170307..7f23cee775f 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 e3d5a91a66b..dc5f0f4b5c1 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 56d48dbc00a..e2d54cd3a16 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 857e7d3bc0c..a4038ddb289 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 e3d5a91a66b..dc5f0f4b5c1 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 e3d5a91a66b..dc5f0f4b5c1 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 5762cf818cd..4137438612b 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 cd7ea93d91a..dbf94992df7 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 5762cf818cd..4137438612b 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 5762cf818cd..4137438612b 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 4dd3808cfe2..f66a1116f15 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 056b04be74c..bcb806c2680 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 3e52d73fc21..34917cad01b 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 4dd3808cfe2..f66a1116f15 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 4dd3808cfe2..f66a1116f15 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 b1e5d41ff7f..763dfe08f8a 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 59b74e43734..1405af83ae1 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 b1e5d41ff7f..763dfe08f8a 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 b1e5d41ff7f..763dfe08f8a 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 e3d5a91a66b..dc5f0f4b5c1 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 56d48dbc00a..e2d54cd3a16 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 857e7d3bc0c..a4038ddb289 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 e3d5a91a66b..dc5f0f4b5c1 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 e3d5a91a66b..dc5f0f4b5c1 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 5762cf818cd..4137438612b 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 cd7ea93d91a..dbf94992df7 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 5762cf818cd..4137438612b 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 5762cf818cd..4137438612b 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 dc4d05ce9d9..c60fd519a38 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 6c6ae9fa1db..de981c90608 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 5244e303e67..8ecb03ad3fd 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 3d0da735bb5..d808eb30ff6 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 dc4d05ce9d9..c60fd519a38 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 74e72ecb972..ea5c6a07b7d 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 cf8968e0ee4..1425e9c6731 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 9687ccc31e3..cfdf0ab0ac5 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 74e72ecb972..ea5c6a07b7d 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 aff81a49101..c4463f73bd5 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 98b02c72117..18b733da11d 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 ecd451e4315..809ff437833 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 aff81a49101..c4463f73bd5 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 aff81a49101..c4463f73bd5 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 c8f16253757..c7a6150491a 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 ac720db602f..f83e48065e0 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 c8f16253757..c7a6150491a 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 c8f16253757..c7a6150491a 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 4adbcaec3f6..4c994c27c07 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 f8dd68d36b7..5b32af2a158 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 8573decbf32..f156322a80a 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 4adbcaec3f6..4c994c27c07 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 4adbcaec3f6..4c994c27c07 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 df418e1287e..1a852ff0d7a 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 c248ed1477b..5b15b2b0d93 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 df418e1287e..1a852ff0d7a 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 df418e1287e..1a852ff0d7a 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 e3d5a91a66b..dc5f0f4b5c1 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 56d48dbc00a..e2d54cd3a16 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 857e7d3bc0c..a4038ddb289 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 e3d5a91a66b..dc5f0f4b5c1 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 e3d5a91a66b..dc5f0f4b5c1 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 5762cf818cd..4137438612b 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 cd7ea93d91a..dbf94992df7 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 5762cf818cd..4137438612b 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 5762cf818cd..4137438612b 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 fe4babaf36d..2dbd55be066 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 c3eebcd09e6..612972bcfd7 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 1b04f4b750e..a0899f256c3 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 713085e0ae8..87936c9e212 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 6a6a04d8fc2..dd011c9b818 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 1b04f4b750e..a0899f256c3 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 1b04f4b750e..a0899f256c3 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 6ffd0a09d01..40e44cfe085 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 f64922f43f8..bf0d04fba77 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 6ffd0a09d01..40e44cfe085 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 6ffd0a09d01..40e44cfe085 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 7df03986bbe..99adb621861 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 c45de5ea27d..7a5695f65fc 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 2ea0fdd8465..7a5695f65fc 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 c1ee05c3e13..0d30cb2455b 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 8a3d5396e58..b05d7be0699 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 b7c8b739818..c19932ffbe5 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 69e89eef9c2..a6abc7d73cf 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 9d6830a58e1..18891d17052 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 35e33183a50..cb25a372cbd 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 d1f6497f0d1..ef54d8ee225 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 6ca21054cb2..7a5695f65fc 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 0be8075211d..646bec8d776 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 e4e434d17b5..646bec8d776 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 e0703212e55..14cf29c0214 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 be6e01e8e8f..9372090f7a8 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 663d4febe9d..af17ce14181 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 efb7d40c768..347c2c10024 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 51b1cd2fada..de91d38c848 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 6eff9873b45..263922bc795 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 e4e434d17b5..646bec8d776 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 0071bb6a18d..2ebfaad8a0a 100644
--- a/docs/content/AnchoredOverlay.mdx
+++ b/docs/content/AnchoredOverlay.mdx
@@ -21,7 +21,7 @@ See also [Overlay positioning](/Overlay#positioning).
     return (
       <AnchoredOverlay
         renderAnchor={anchorProps => (
-          <Button {...anchorProps} trailingAction={TriangleDownIcon}>
+          <Button {...anchorProps} trailingIcon={TriangleDownIcon}>
             Click me to open
           </Button>
         )}
@@ -92,14 +92,14 @@ See also [Overlay positioning](/Overlay#positioning).
   />
   <PropsTableRow
     name="side"
-    type={`| 'inside-top'
-| 'inside-bottom'
-| 'inside-left'
-| 'inside-right'
-| 'inside-center'
-| 'outside-top'
-| 'outside-bottom'
-| 'outside-left'
+    type={`| 'inside-top' 
+| 'inside-bottom' 
+| 'inside-left' 
+| 'inside-right' 
+| 'inside-center' 
+| 'outside-top' 
+| 'outside-bottom' 
+| 'outside-left' 
 | 'outside-right'`}
     defaultValue="'outside-bottom'"
   />
@@ -162,6 +162,6 @@ See also [Overlay positioning](/Overlay#positioning).
     stableApi: false,
     addressedApiFeedback: false,
     hasDesignGuidelines: false,
-    hasFigmaComponent: false,
+    hasFigmaComponent: false
   }}
 />
diff --git a/docs/content/Button.mdx b/docs/content/Button.mdx
index 8155d562481..3c62d7dac14 100644
--- a/docs/content/Button.mdx
+++ b/docs/content/Button.mdx
@@ -111,12 +111,13 @@ The counter will match the `variant` styles of the parent button.
 </Button>
 ```
 
-### Block button
+### Styling a button
 
-Use the `block` prop for full width buttons.
+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.
 
 ```jsx live
-<Button block>Block</Button>
+<Button sx={{width: '100%'}}>Block</Button>
 ```
 
 ## Props
@@ -139,7 +140,7 @@ Use the `block` prop for full width buttons.
     stableApi: false,
     addressedApiFeedback: false,
     hasDesignGuidelines: false,
-    hasFigmaComponent: false
+    hasFigmaComponent: false,
   }}
 />
 
diff --git a/docs/content/SelectPanel.mdx b/docs/content/SelectPanel.mdx
index 6c8de68d900..bfa01cb06d0 100644
--- a/docs/content/SelectPanel.mdx
+++ b/docs/content/SelectPanel.mdx
@@ -45,7 +45,7 @@ function DemoComponent() {
   return (
     <SelectPanel
       renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-        <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+        <Button trailingIcon={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
           {children || 'Select Labels'}
         </Button>
       )}
diff --git a/src/ActionMenu.tsx b/src/ActionMenu.tsx
index 4409a07d988..f73caed7493 100644
--- a/src/ActionMenu.tsx
+++ b/src/ActionMenu.tsx
@@ -9,6 +9,7 @@ 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,
@@ -74,10 +75,21 @@ const Anchor = React.forwardRef<HTMLElement, ActionMenuAnchorProps>(({children,
 
 /** this component is syntactical sugar 🍭 */
 export type ActionMenuButtonProps = ButtonProps
-const MenuButton = React.forwardRef((props, anchorRef) => {
+const MenuButton = React.forwardRef(({sx: sxProp = {}, ...props}, anchorRef) => {
   return (
     <Anchor ref={anchorRef}>
-      <Button type="button" trailingAction={TriangleDownIcon} {...props} />
+      <Button
+        type="button"
+        trailingIcon={TriangleDownIcon}
+        sx={merge<BetterSystemStyleObject>(
+          {
+            // override the margin on caret for optical alignment
+            '[data-component=trailingIcon]': {marginX: -1},
+          },
+          sxProp,
+        )}
+        {...props}
+      />
     </Anchor>
   )
 }) as PolymorphicForwardRefComponent<'button', ActionMenuButtonProps>
diff --git a/src/Button/Button.features.stories.tsx b/src/Button/Button.features.stories.tsx
index c3cacf1472d..3e684f8a9a1 100644
--- a/src/Button/Button.features.stories.tsx
+++ b/src/Button/Button.features.stories.tsx
@@ -1,4 +1,4 @@
-import {EyeIcon, TriangleDownIcon, HeartIcon, SearchIcon} from '@primer/octicons-react'
+import {EyeIcon, HeartIcon} from '@primer/octicons-react'
 import React, {useState} from 'react'
 import {Button} from '.'
 
@@ -30,10 +30,6 @@ 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>
@@ -41,30 +37,3 @@ export const Small = () => <Button size="small">Default</Button>
 export const Medium = () => <Button size="medium">Default</Button>
 
 export const Large = () => <Button size="large">Default</Button>
-
-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="invisible">
-        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>
-  )
-}
diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx
index ca84096b269..cd3166523cb 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, TriangleDownIcon, XIcon, HeartIcon} from '@primer/octicons-react'
+import {EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon} from '@primer/octicons-react'
 import {Story, Meta} from '@storybook/react'
 import {Button} from '.'
 import {OcticonArgType} from '../utils/story-helpers'
@@ -21,39 +21,18 @@ export default {
     variant: {
       control: {
         type: 'radio',
-        options: ['default', 'primary', 'danger', 'invisible'],
-      },
-    },
-    alignContent: {
-      control: {
-        type: 'radio',
-        options: ['center', 'start'],
-      },
-    },
-    block: {
-      control: {
-        type: 'boolean',
+        options: ['default', 'primary', 'danger', 'invisible', 'outline'],
       },
     },
     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/ButtonBase.tsx b/src/Button/ButtonBase.tsx
index d6d70870a6d..3d4d3baf56b 100644
--- a/src/Button/ButtonBase.tsx
+++ b/src/Button/ButtonBase.tsx
@@ -4,37 +4,31 @@ import Box from '../Box'
 import {BetterSystemStyleObject, merge} from '../sx'
 import {useTheme} from '../ThemeProvider'
 import {ButtonProps, StyledButton} from './types'
-import {getVariantStyles, getButtonStyles, getAlignContentSize} from './styles'
+import {getVariantStyles, getSizeStyles, getButtonStyles} 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,
-      trailingAction: TrailingAction,
-      variant = 'default',
-      size = 'medium',
-      alignContent = 'center',
-      block = false,
-      ...rest
-    } = props
-
+    const {leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, variant = 'default', size = 'medium', ...rest} = props
     const innerRef = React.useRef<HTMLButtonElement>(null)
     useRefObjectAsForwardedRef(forwardedRef, innerRef)
 
     const {theme} = useTheme()
     const baseStyles = useMemo(() => {
-      return merge.all([getButtonStyles(theme), getVariantStyles(variant, theme)])
-    }, [theme, variant])
+      return merge.all([getButtonStyles(theme), getSizeStyles(size, variant, false), getVariantStyles(variant, theme)])
+    }, [theme, size, variant])
     const sxStyles = useMemo(() => {
       return merge<BetterSystemStyleObject>(baseStyles, sxProp)
     }, [baseStyles, sxProp])
-    const iconWrapStyles = {
-      display: 'flex',
-      pointerEvents: 'none',
-    }
 
     if (__DEV__) {
       /**
@@ -56,31 +50,16 @@ const ButtonBase = forwardRef(
     }
 
     return (
-      <StyledButton
-        as={Component}
-        sx={sxStyles}
-        {...rest}
-        ref={innerRef}
-        data-component={block ? 'block' : null}
-        data-size={size === 'small' || size === 'large' ? size : undefined}
-        data-no-visuals={!LeadingIcon && !TrailingIcon && !TrailingAction ? true : undefined}
-      >
-        <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 />
+      <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>
diff --git a/src/Button/IconButton.tsx b/src/Button/IconButton.tsx
index c3c53ea78e8..ad4aef0c30f 100644
--- a/src/Button/IconButton.tsx
+++ b/src/Button/IconButton.tsx
@@ -1,25 +1,27 @@
 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, getVariantStyles} from './styles'
+import {getBaseStyles, getSizeStyles, getVariantStyles} from './styles'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {defaultSxProp} from '../utils/defaultSxProp'
 
 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), getVariantStyles(variant, theme), sxProp])
+  const sxStyles = merge.all<BetterSystemStyleObject>([
+    getBaseStyles(theme),
+    getSizeStyles(size, variant, true),
+    getVariantStyles(variant, theme),
+    sxProp,
+  ])
   return (
-    <StyledButton
-      data-component="IconButton"
-      data-size={size}
-      sx={sxStyles}
-      {...rest}
-      // @ts-expect-error StyledButton wants both Anchor and Button refs
-      ref={forwardedRef}
-    >
-      <Icon />
+    // @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>
   )
 }) as PolymorphicForwardRefComponent<'button' | 'a', IconButtonProps>
diff --git a/src/Button/LinkButton.features.stories.tsx b/src/Button/LinkButton.features.stories.tsx
index a6ef0c35987..1a53318634b 100644
--- a/src/Button/LinkButton.features.stories.tsx
+++ b/src/Button/LinkButton.features.stories.tsx
@@ -1,4 +1,4 @@
-import {EyeIcon, ChevronRightIcon, HeartIcon} from '@primer/octicons-react'
+import {EyeIcon, HeartIcon} from '@primer/octicons-react'
 import React, {forwardRef} from 'react'
 import {Button} from '.'
 
@@ -48,18 +48,6 @@ 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 5ca0dcab065..feca1c35a6f 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, ChevronRightIcon} from '@primer/octicons-react'
+import {EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon} from '@primer/octicons-react'
 import {Story, Meta} from '@storybook/react'
 import {Button} from '.'
 import {OcticonArgType} from '../utils/story-helpers'
@@ -19,32 +19,13 @@ 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 dd9baa0f51a..02fea83f269 100644
--- a/src/Button/LinkButton.tsx
+++ b/src/Button/LinkButton.tsx
@@ -9,7 +9,20 @@ type MyProps = LinkButtonProps & ButtonBaseProps
 
 const LinkButton = forwardRef(
   ({children, as: Component = 'a', sx = defaultSxProp, ...props}, forwardedRef): JSX.Element => {
-    const sxStyle = merge.all<BetterSystemStyleObject>([sx])
+    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}
diff --git a/src/Button/styles.ts b/src/Button/styles.ts
index 55f82740a3c..8603860dec5 100644
--- a/src/Button/styles.ts
+++ b/src/Button/styles.ts
@@ -1,6 +1,8 @@
-import {VariantType, AlignContent} from './types'
+import {VariantType} 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: {
@@ -9,7 +11,6 @@ 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',
@@ -29,7 +30,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
     primary: {
       color: 'btn.primary.text',
       backgroundColor: 'btn.primary.bg',
-      borderColor: 'btn.primary.border',
+      borderColor: 'border.subtle',
       boxShadow: `${theme?.shadows.btn.primary.shadow}`,
       '&:hover:not([disabled])': {
         color: 'btn.primary.hoverText',
@@ -102,15 +103,15 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       },
     },
     invisible: {
-      color: 'btn.text',
+      color: 'accent.fg',
       backgroundColor: 'transparent',
-      borderColor: 'transparent',
+      border: '0',
       boxShadow: 'none',
       '&:hover:not([disabled])': {
-        backgroundColor: 'actionListItem.default.hoverBg',
+        backgroundColor: 'btn.hoverBg',
       },
       '&:active:not([disabled])': {
-        backgroundColor: 'actionListItem.default.activeBg',
+        backgroundColor: 'btn.selectedBg',
       },
       '&:disabled': {
         color: 'primer.fg.disabled',
@@ -119,16 +120,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         },
       },
       '&[aria-expanded=true]': {
-        backgroundColor: 'actionListItem.default.selectedBg',
-      },
-      svg: {
-        color: 'fg.muted',
-      },
-      '&[data-no-visuals]': {
-        color: 'accent.fg',
-      },
-      '&:has([data-component="ButtonCounter"])': {
-        color: 'btn.text',
+        backgroundColor: 'btn.selectedBg',
       },
     },
     outline: {
@@ -178,42 +170,70 @@ 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: 'semibold',
-  fontSize: '1',
+  fontWeight: 'bold',
+  lineHeight: TEXT_ROW_HEIGHT,
+  whiteSpace: 'nowrap',
+  verticalAlign: 'middle',
   cursor: 'pointer',
   appearance: 'none',
   userSelect: 'none',
   textDecoration: 'none',
   textAlign: 'center',
-  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',
-  },
-  '&:active': {
-    transition: 'none',
-  },
   '&:disabled': {
-    cursor: 'not-allowed',
-    boxShadow: 'none',
+    cursor: 'default',
+  },
+  '&:disabled svg': {
+    opacity: '0.6',
   },
   '@media (forced-colors: active)': {
     '&:focus': {
@@ -221,89 +241,25 @@ 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',
-  },
-  '&[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),
-    '&[data-component="block"]': {
-      width: '100%',
+    display: 'grid',
+    gridTemplateAreas: '"leadingIcon text trailingIcon"',
+    '& > :not(:last-child)': {
+      mr: '2',
     },
-    '[data-component="leadingVisual"]': {
-      gridArea: 'leadingVisual',
+    '[data-component="leadingIcon"]': {
+      gridArea: 'leadingIcon',
     },
     '[data-component="text"]': {
       gridArea: 'text',
-      lineHeight: 'calc(20/14)',
-      whiteSpace: 'nowrap',
     },
-    '[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',
+    '[data-component="trailingIcon"]': {
+      gridArea: 'trailingIcon',
     },
   }
   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 f2ef172397c..f68372b620c 100644
--- a/src/Button/types.ts
+++ b/src/Button/types.ts
@@ -12,8 +12,6 @@ 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}
@@ -31,10 +29,6 @@ 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>
 
@@ -47,15 +41,7 @@ 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 b91d79d2a4f..8f8b3369959 100644
--- a/src/Token/TokenBase.tsx
+++ b/src/Token/TokenBase.tsx
@@ -77,6 +77,8 @@ const variants = variant<
     lineHeight: string
     paddingLeft: number
     paddingRight: number
+    paddingTop: number
+    paddingBottom: number
   },
   TokenSizeKeys
 >({
@@ -89,6 +91,10 @@ 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,
@@ -96,6 +102,8 @@ const variants = variant<
       lineHeight: tokenSizes.medium,
       paddingLeft: 2,
       paddingRight: 2,
+      paddingTop: 0,
+      paddingBottom: 0,
     },
     large: {
       fontSize: 0,
@@ -103,6 +111,8 @@ 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 2db11b07916..e4257354934 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}
-                  trailingAction={TriangleDownIcon}
+                  trailingIcon={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 3a2221a4599..d893a9894e0 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 block>Edit Profile</Button>
+            <Button sx={{width: '100%'}}>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 c19ac720ef9..fdadc436761 100644
--- a/src/_TextInputInnerAction.tsx
+++ b/src/_TextInputInnerAction.tsx
@@ -20,17 +20,13 @@ 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: '""',
@@ -81,13 +77,14 @@ const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>(
     }
 
     return (
-      <Box as="span" className="TextInput-action" marginLeft={1} marginRight={1} lineHeight="0">
+      <Box as="span" className="TextInput-action" margin={1}>
         {icon && !children ? (
           <Tooltip aria-label={ariaLabel}>
             <IconButton
               variant={variant}
               type="button"
               icon={icon}
+              size="small"
               sx={sx}
               {...rest}
               aria-label={ariaLabel as unknown as string}
@@ -97,7 +94,7 @@ const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>(
           </Tooltip>
         ) : (
           <ConditionalTooltip aria-label={ariaLabel}>
-            <Button variant={variant} type="button" sx={sx} {...rest} ref={forwardedRef}>
+            <Button variant={variant} size="small" type="button" sx={sx} {...rest} ref={forwardedRef}>
               {children}
             </Button>
           </ConditionalTooltip>
diff --git a/src/_TextInputWrapper.tsx b/src/_TextInputWrapper.tsx
index 5af6ff7d396..f1e991abfa3 100644
--- a/src/_TextInputWrapper.tsx
+++ b/src/_TextInputWrapper.tsx
@@ -27,21 +27,16 @@ 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',
-      height: '40px',
+      fontSize: 3,
     },
   },
 })
@@ -148,7 +143,7 @@ export const TextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
     css`
       font-family: ${get('fonts.mono')};
     `}
-
+  
   ${props =>
     props.validationStatus === 'error' &&
     css`
@@ -170,7 +165,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 a7c86270d03..aaa887cdbfa 100644
--- a/src/__tests__/Button.test.tsx
+++ b/src/__tests__/Button.test.tsx
@@ -29,10 +29,10 @@ describe('Button', () => {
     expect(onClick).toHaveBeenCalledTimes(1)
   })
 
-  it('respects block prop', () => {
-    const container = render(<Button block>Block</Button>)
+  it('respects width props', () => {
+    const container = render(<Button sx={{width: 200}}>Block</Button>)
     const button = container.getByRole('button')
-    expect(button).toMatchSnapshot()
+    expect(button).toHaveStyleRule('width', '200px')
   })
 
   it('respects the "disabled" prop', () => {
@@ -48,16 +48,20 @@ describe('Button', () => {
     expect(onClick).toHaveBeenCalledTimes(0)
   })
 
-  it('respects the small size prop', () => {
+  it('respects the "variant" prop', () => {
     const container = render(<Button size="small">Smol</Button>)
     const button = container.getByRole('button')
-    expect(button).toMatchSnapshot()
+    expect(button).toHaveStyleRule('font-size', '12px')
   })
 
-  it('respects the large size prop', () => {
-    const container = render(<Button size="large">Smol</Button>)
+  it('respects the "fontSize" prop over the "variant" prop', () => {
+    const container = render(
+      <Button size="small" sx={{fontSize: 20}}>
+        Big Smol
+      </Button>,
+    )
     const button = container.getByRole('button')
-    expect(button).toMatchSnapshot()
+    expect(button).toHaveStyleRule('font-size', '20px')
   })
 
   it('styles primary button appropriately', () => {
@@ -78,15 +82,22 @@ 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 8fe3eb22637..44774e738c9 100644
--- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
@@ -8,18 +8,8 @@ exports[`ActionMenu renders consistently 1`] = `
 }
 
 .c2 {
-  -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;
+  display: inline-block;
+  margin-left: 8px;
 }
 
 .c1 {
@@ -27,8 +17,10 @@ exports[`ActionMenu renders consistently 1`] = `
   border: 1px solid;
   border-color: rgba(27,31,36,0.15);
   font-family: inherit;
-  font-weight: 500;
-  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -40,28 +32,13 @@ exports[`ActionMenu renders consistently 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;
+  display: grid;
+  grid-template-areas: "leadingIcon text trailingIcon";
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 16px;
+  padding-right: 16px;
+  font-size: 14px;
   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);
@@ -83,31 +60,8 @@ 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: not-allowed;
-  box-shadow: none;
+  cursor: default;
   color: #8c959f;
 }
 
@@ -115,101 +69,32 @@ exports[`ActionMenu renders consistently 1`] = `
   color: inherit;
 }
 
-.c1 [data-component=ButtonCounter] {
-  font-size: 14px;
-}
-
-.c1[data-component=IconButton] {
-  display: inline-grid;
-  padding: unset;
-  place-content: center;
-  width: 32px;
-}
-
-.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:disabled svg {
+  opacity: 0.6;
 }
 
-.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) {
+.c1 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c1[data-size="large"][data-component=IconButton] {
-  width: 40px;
-  padding: unset;
-}
-
-.c1[data-component="block"] {
-  width: 100%;
-}
-
-.c1 [data-component="leadingVisual"] {
-  grid-area: leadingVisual;
+.c1 [data-component="leadingIcon"] {
+  grid-area: leadingIcon;
 }
 
 .c1 [data-component="text"] {
   grid-area: text;
-  line-height: calc(20/14);
-  white-space: nowrap;
 }
 
-.c1 [data-component="trailingVisual"] {
-  grid-area: trailingVisual;
-}
-
-.c1 [data-component="trailingAction"] {
-  margin-right: -4px;
+.c1 [data-component="trailingIcon"] {
+  grid-area: trailingIcon;
 }
 
-.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 [data-component=ButtonCounter] {
+  font-size: 14px;
 }
 
 .c1:hover:not([disabled]) {
   background-color: #f3f4f6;
-  border-color: rgba(27,31,36,0.15);
 }
 
 .c1:active:not([disabled]) {
@@ -222,6 +107,11 @@ 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;
@@ -237,7 +127,6 @@ exports[`ActionMenu renders consistently 1`] = `
   <button
     aria-haspopup="true"
     className="c1"
-    data-component={null}
     id="react-aria-1"
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -245,18 +134,13 @@ exports[`ActionMenu renders consistently 1`] = `
     type="button"
   >
     <span
-      className="c2"
-      data-component="buttonContent"
+      data-component="text"
     >
-      <span
-        data-component="text"
-      >
-        Toggle Menu
-      </span>
+      Toggle Menu
     </span>
     <span
-      className="c3"
-      data-component="trailingAction"
+      className="c2"
+      data-component="trailingIcon"
     >
       <svg
         aria-hidden="true"
diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap
index d81764ef5c2..eb53d92bdc5 100644
--- a/src/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Button.test.tsx.snap
@@ -1,20 +1,15 @@
 // 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: 500;
-  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -26,28 +21,13 @@ exports[`Button renders consistently 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;
+  display: grid;
+  grid-template-areas: "leadingIcon text trailingIcon";
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 16px;
+  padding-right: 16px;
+  font-size: 14px;
   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);
@@ -69,31 +49,8 @@ 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: not-allowed;
-  box-shadow: none;
+  cursor: default;
   color: #8c959f;
 }
 
@@ -101,101 +58,32 @@ exports[`Button renders consistently 1`] = `
   color: inherit;
 }
 
-.c0 [data-component=ButtonCounter] {
-  font-size: 14px;
-}
-
-.c0[data-component=IconButton] {
-  display: inline-grid;
-  padding: unset;
-  place-content: center;
-  width: 32px;
-}
-
-.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:disabled svg {
+  opacity: 0.6;
 }
 
-.c0[data-size="large"] {
-  padding: 0 16px;
-  height: 40px;
-  gap: 8px;
-}
-
-.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0[data-size="large"][data-component=IconButton] {
-  width: 40px;
-  padding: unset;
-}
-
-.c0[data-component="block"] {
-  width: 100%;
-}
-
-.c0 [data-component="leadingVisual"] {
-  grid-area: leadingVisual;
+.c0 [data-component="leadingIcon"] {
+  grid-area: leadingIcon;
 }
 
 .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="trailingIcon"] {
+  grid-area: trailingIcon;
 }
 
-.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=ButtonCounter] {
+  font-size: 14px;
 }
 
 .c0:hover:not([disabled]) {
   background-color: #f3f4f6;
-  border-color: rgba(27,31,36,0.15);
 }
 
 .c0:active:not([disabled]) {
@@ -216,30 +104,18 @@ exports[`Button renders consistently 1`] = `
 
 <button
   className="c0"
-  data-component={null}
-  data-no-visuals={true}
->
-  <span
-    className="c1"
-    data-component="buttonContent"
-  />
-</button>
+/>
 `;
 
-exports[`Button respects block prop 1`] = `
-.c1 {
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
+exports[`Button styles danger button appropriately 1`] = `
 .c0 {
   border-radius: 2;
   border: 1px solid;
   font-family: inherit;
-  font-weight: semibold;
-  font-size: 14px;
+  font-weight: bold;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -251,31 +127,16 @@ exports[`Button respects block prop 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: btn.text;
+  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;
   background-color: btn.bg;
-  box-shadow: undefined,undefined;
+  box-shadow: undefined;
 }
 
 .c0:focus:not(:disabled) {
@@ -294,143 +155,68 @@ exports[`Button respects block prop 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: not-allowed;
-  box-shadow: none;
-  color: primer.fg.disabled;
+  cursor: default;
+  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;
-}
-
-.c0[data-component=IconButton] {
-  display: inline-grid;
-  padding: unset;
-  place-content: center;
-  width: 32px;
-}
-
-.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:disabled svg {
+  opacity: 0.6;
 }
 
-.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0[data-size="large"][data-component=IconButton] {
-  width: 40px;
-  padding: unset;
-}
-
-.c0[data-component="block"] {
-  width: 100%;
-}
-
-.c0 [data-component="leadingVisual"] {
-  grid-area: leadingVisual;
+.c0 [data-component="leadingIcon"] {
+  grid-area: leadingIcon;
 }
 
 .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="trailingIcon"] {
+  grid-area: trailingIcon;
 }
 
-.c0 [data-component="trailingAction"] {
-  margin-right: -4px;
+.c0 [data-component=ButtonCounter] {
+  font-size: 14px;
+  color: btn.danger.text;
+  background-color: btn.danger.counterBg;
 }
 
-.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.danger.hoverText;
+  background-color: btn.danger.hoverBg;
+  border-color: btn.danger.hoverBorder;
+  box-shadow: undefined;
 }
 
-.c0:hover:not([disabled]) {
-  background-color: btn.hoverBg;
-  border-color: btn.hoverBorder;
+.c0:hover:not([disabled]) [data-component=ButtonCounter] {
+  background-color: btn.danger.hoverCounterBg;
+  color: btn.danger.hoverText;
 }
 
 .c0:active:not([disabled]) {
-  background-color: btn.activeBg;
-  border-color: btn.activeBorder;
+  color: btn.danger.selectedText;
+  background-color: btn.danger.selectedBg;
+  box-shadow: undefined;
+  border-color: btn.danger.selectedBorder;
 }
 
 .c0[aria-expanded=true] {
-  background-color: btn.activeBg;
-  border-color: btn.activeBorder;
+  color: btn.danger.selectedText;
+  background-color: btn.danger.selectedBg;
+  box-shadow: undefined;
+  border-color: btn.danger.selectedBorder;
 }
 
 @media (forced-colors:active) {
@@ -441,36 +227,28 @@ exports[`Button respects block prop 1`] = `
 
 <button
   class="c0"
-  data-component="block"
-  data-no-visuals="true"
 >
   <span
-    class="c1"
-    data-component="buttonContent"
+    data-component="text"
   >
-    <span
-      data-component="text"
-    >
-      Block
-    </span>
+    Danger
   </span>
 </button>
 `;
 
-exports[`Button respects the alignContent prop 1`] = `
+exports[`Button styles icon only button to make it a square 1`] = `
 .c1 {
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
+  display: inline-block;
 }
 
 .c0 {
   border-radius: 2;
   border: 1px solid;
   font-family: inherit;
-  font-weight: semibold;
-  font-size: 14px;
+  font-weight: bold;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -482,28 +260,11 @@ exports[`Button respects the alignContent prop 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;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 8px;
+  padding-right: 8px;
+  font-size: 14px;
   color: btn.text;
   background-color: btn.bg;
   box-shadow: undefined,undefined;
@@ -525,31 +286,8 @@ exports[`Button respects the alignContent prop 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: not-allowed;
-  box-shadow: none;
+  cursor: default;
   color: primer.fg.disabled;
 }
 
@@ -557,101 +295,16 @@ exports[`Button respects the alignContent prop 1`] = `
   color: inherit;
 }
 
-.c0 [data-component=ButtonCounter] {
-  font-size: 14px;
-}
-
-.c0[data-component=IconButton] {
-  display: inline-grid;
-  padding: unset;
-  place-content: center;
-  width: 32px;
-}
-
-.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-component="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:disabled svg {
+  opacity: 0.6;
 }
 
-.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=ButtonCounter] {
+  font-size: 14px;
 }
 
 .c0:hover:not([disabled]) {
   background-color: btn.hoverBg;
-  border-color: btn.hoverBorder;
 }
 
 .c0:active:not([disabled]) {
@@ -671,36 +324,41 @@ exports[`Button respects the alignContent prop 1`] = `
 }
 
 <button
+  aria-label="Search button"
   class="c0"
-  data-no-visuals="true"
 >
   <span
     class="c1"
-    data-component="buttonContent"
   >
-    <span
-      data-component="text"
+    <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"
     >
-      Align start
-    </span>
+      <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>
   </span>
 </button>
 `;
 
-exports[`Button respects the large size prop 1`] = `
-.c1 {
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
+exports[`Button styles invisible button appropriately 1`] = `
 .c0 {
   border-radius: 2;
-  border: 1px solid;
+  border: 0;
   font-family: inherit;
-  font-weight: semibold;
-  font-size: 14px;
+  font-weight: bold;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -712,31 +370,16 @@ exports[`Button respects the large size prop 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: btn.text;
-  background-color: btn.bg;
-  box-shadow: undefined,undefined;
+  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;
 }
 
 .c0:focus:not(:disabled) {
@@ -755,31 +398,8 @@ exports[`Button respects the large size prop 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: not-allowed;
-  box-shadow: none;
+  cursor: default;
   color: primer.fg.disabled;
 }
 
@@ -787,111 +407,40 @@ exports[`Button respects the large size prop 1`] = `
   color: inherit;
 }
 
-.c0 [data-component=ButtonCounter] {
-  font-size: 14px;
-}
-
-.c0[data-component=IconButton] {
-  display: inline-grid;
-  padding: unset;
-  place-content: center;
-  width: 32px;
-}
-
-.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:disabled svg {
+  opacity: 0.6;
 }
 
-.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) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0[data-size="large"][data-component=IconButton] {
-  width: 40px;
-  padding: unset;
-}
-
-.c0[data-component="block"] {
-  width: 100%;
-}
-
-.c0 [data-component="leadingVisual"] {
-  grid-area: leadingVisual;
+.c0 [data-component="leadingIcon"] {
+  grid-area: leadingIcon;
 }
 
 .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="trailingIcon"] {
+  grid-area: trailingIcon;
 }
 
-.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=ButtonCounter] {
+  font-size: 14px;
 }
 
 .c0:hover:not([disabled]) {
   background-color: btn.hoverBg;
-  border-color: btn.hoverBorder;
 }
 
 .c0:active:not([disabled]) {
-  background-color: btn.activeBg;
-  border-color: btn.activeBorder;
+  background-color: btn.selectedBg;
 }
 
 .c0[aria-expanded=true] {
-  background-color: btn.activeBg;
-  border-color: btn.activeBorder;
+  background-color: btn.selectedBg;
 }
 
 @media (forced-colors:active) {
@@ -902,36 +451,25 @@ exports[`Button respects the large size prop 1`] = `
 
 <button
   class="c0"
-  data-no-visuals="true"
-  data-size="large"
 >
   <span
-    class="c1"
-    data-component="buttonContent"
+    data-component="text"
   >
-    <span
-      data-component="text"
-    >
-      Smol
-    </span>
+    Invisible
   </span>
 </button>
 `;
 
-exports[`Button respects the small size prop 1`] = `
-.c1 {
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
+exports[`Button styles outline button appropriately 1`] = `
 .c0 {
   border-radius: 2;
   border: 1px solid;
+  border-color: btn.border;
   font-family: inherit;
-  font-weight: semibold;
-  font-size: 14px;
+  font-weight: bold;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -943,31 +481,16 @@ exports[`Button respects the small size prop 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: btn.text;
+  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;
   background-color: btn.bg;
-  box-shadow: undefined,undefined;
 }
 
 .c0:focus:not(:disabled) {
@@ -986,390 +509,68 @@ exports[`Button respects the small size prop 1`] = `
   outline-offset: -2px;
 }
 
-.c0[href] {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
+.c0:disabled {
+  cursor: default;
+  color: btn.outline.disabledText;
+  background-color: btn.outline.disabledBg;
+  border-color: btn.border;
 }
 
-.c0[href]:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+.c0:disabled [data-component=ButtonCounter] {
+  background-color: btn.outline.disabledCounterBg;
+  color: inherit;
 }
 
-.c0:hover {
-  -webkit-transition-duration: 80ms;
-  transition-duration: 80ms;
+.c0:disabled svg {
+  opacity: 0.6;
 }
 
-.c0:active {
-  -webkit-transition: none;
-  transition: none;
+.c0 > :not(:last-child) {
+  margin-right: 8px;
 }
 
-.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;
-}
-
-.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-component="block"] {
-  width: 100%;
-}
-
-.c0 [data-component="leadingVisual"] {
-  grid-area: leadingVisual;
+.c0 [data-component="leadingIcon"] {
+  grid-area: leadingIcon;
 }
 
 .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]) {
-  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"
->
-  <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="trailingIcon"] {
+  grid-area: trailingIcon;
 }
 
 .c0 [data-component=ButtonCounter] {
   font-size: 14px;
-  color: btn.danger.text;
-  background-color: btn.danger.counterBg;
-}
-
-.c0[data-component=IconButton] {
-  display: inline-grid;
-  padding: unset;
-  place-content: center;
-  width: 32px;
-}
-
-.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-component="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;
+  background-color: btn.outline.counterBg;
+  color: btn.outline.text;
 }
 
 .c0:hover:not([disabled]) {
-  color: btn.danger.hoverText;
-  background-color: btn.danger.hoverBg;
-  border-color: btn.danger.hoverBorder;
+  color: btn.outline.hoverText;
+  background-color: btn.outline.hoverBg;
+  border-color: btn.outline.hoverBorder;
   box-shadow: undefined;
 }
 
 .c0:hover:not([disabled]) [data-component=ButtonCounter] {
-  background-color: btn.danger.hoverCounterBg;
-  color: btn.danger.hoverText;
+  background-color: btn.outline.hoverCounterBg;
+  color: inherit;
 }
 
 .c0:active:not([disabled]) {
-  color: btn.danger.selectedText;
-  background-color: btn.danger.selectedBg;
+  color: btn.outline.selectedText;
+  background-color: btn.outline.selectedBg;
   box-shadow: undefined;
-  border-color: btn.danger.selectedBorder;
+  border-color: btn.outline.selectedBorder;
 }
 
 .c0[aria-expanded=true] {
-  color: btn.danger.selectedText;
-  background-color: btn.danger.selectedBg;
+  color: btn.outline.selectedText;
+  background-color: btn.outline.selectedBg;
   box-shadow: undefined;
-  border-color: btn.danger.selectedBorder;
+  border-color: btn.outline.selectedBorder;
 }
 
 @media (forced-colors:active) {
@@ -1380,36 +581,25 @@ exports[`Button styles danger button appropriately 1`] = `
 
 <button
   class="c0"
-  data-no-visuals="true"
 >
   <span
-    class="c1"
-    data-component="buttonContent"
+    data-component="text"
   >
-    <span
-      data-component="text"
-    >
-      Danger
-    </span>
+    Outline
   </span>
 </button>
 `;
 
-exports[`Button styles invisible button appropriately 1`] = `
-.c1 {
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
+exports[`Button styles primary button appropriately 1`] = `
 .c0 {
   border-radius: 2;
   border: 1px solid;
-  border-color: transparent;
+  border-color: border.subtle;
   font-family: inherit;
-  font-weight: semibold;
-  font-size: 14px;
+  font-weight: bold;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -1421,268 +611,13 @@ exports[`Button styles invisible 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: btn.text;
-  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;
-}
-
-.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-component="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: actionListItem.default.hoverBg;
-}
-
-.c0:active:not([disabled]) {
-  background-color: actionListItem.default.activeBg;
-}
-
-.c0[aria-expanded=true] {
-  background-color: actionListItem.default.selectedBg;
-}
-
-.c0 svg {
-  color: fg.muted;
-}
-
-.c0[data-no-visuals] {
-  color: accent.fg;
-}
-
-.c0:has([data-component="ButtonCounter"]) {
-  color: btn.text;
-}
-
-@media (forced-colors:active) {
-  .c0:focus {
-    outline: solid 1px transparent;
-  }
-}
-
-<button
-  class="c0"
-  data-no-visuals="true"
->
-  <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;
+  grid-template-areas: "leadingIcon text trailingIcon";
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 16px;
+  padding-right: 16px;
   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;
@@ -1704,31 +639,8 @@ 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: not-allowed;
-  box-shadow: none;
+  cursor: default;
   color: btn.primary.disabledText;
   background-color: btn.primary.disabledBg;
 }
@@ -1737,98 +649,30 @@ exports[`Button styles primary button appropriately 1`] = `
   color: inherit;
 }
 
-.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;
-}
-
-.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:disabled svg {
+  opacity: 0.6;
 }
 
-.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) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c0[data-size="large"][data-component=IconButton] {
-  width: 40px;
-  padding: unset;
-}
-
-.c0[data-component="block"] {
-  width: 100%;
-}
-
-.c0 [data-component="leadingVisual"] {
-  grid-area: leadingVisual;
+.c0 [data-component="leadingIcon"] {
+  grid-area: leadingIcon;
 }
 
 .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="trailingIcon"] {
+  grid-area: trailingIcon;
 }
 
-.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=ButtonCounter] {
+  font-size: 14px;
+  background-color: btn.primary.counterBg;
+  color: btn.primary.text;
 }
 
 .c0:hover:not([disabled]) {
@@ -1862,17 +706,11 @@ exports[`Button styles primary button appropriately 1`] = `
 
 <button
   class="c0"
-  data-no-visuals="true"
 >
   <span
-    class="c1"
-    data-component="buttonContent"
+    data-component="text"
   >
-    <span
-      data-component="text"
-    >
-      Primary
-    </span>
+    Primary
   </span>
 </button>
 `;
diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 93fd4df7d05..39909a0250f 100644
--- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -630,12 +630,11 @@ 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;
-  height: 40px;
+  font-size: 20px;
   background-repeat: no-repeat;
   background-position: right 8px center;
   padding-left: 0;
@@ -1143,7 +1142,6 @@ 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;
@@ -1253,18 +1251,22 @@ exports[`TextInput renders small 1`] = `
 
 exports[`TextInput renders trailingAction icon button 1`] = `
 .c2 {
-  margin-left: 4px;
-  margin-right: 4px;
-  line-height: 0;
+  margin: 4px;
+}
+
+.c5 {
+  display: inline-block;
 }
 
 .c4 {
   border-radius: 6px;
-  border: 1px solid;
-  border-color: transparent;
+  border: 0;
+  border-color: rgba(27,31,36,0.15);
   font-family: inherit;
-  font-weight: 500;
-  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -1276,35 +1278,14 @@ exports[`TextInput renders trailingAction icon button 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: #24292f;
-  background-color: transparent;
-  box-shadow: none;
   padding-top: 2px;
-  padding-right: 4px;
   padding-bottom: 2px;
   padding-left: 4px;
+  padding-right: 4px;
+  font-size: 14px;
+  color: #24292f;
+  background-color: transparent;
+  box-shadow: none;
   position: relative;
 }
 
@@ -1324,31 +1305,8 @@ 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: not-allowed;
-  box-shadow: none;
+  cursor: default;
   color: #8c959f;
 }
 
@@ -1356,83 +1314,24 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   color: inherit;
 }
 
-.c4 [data-component=ButtonCounter] {
-  font-size: 14px;
-}
-
-.c4[data-component=IconButton] {
-  display: inline-grid;
-  padding: unset;
-  place-content: center;
-  width: 32px;
-}
-
-.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:disabled svg {
+  opacity: 0.6;
 }
 
-.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-component=ButtonCounter] {
+  font-size: 14px;
 }
 
 .c4:hover:not([disabled]) {
-  background-color: rgba(208,215,222,0.32);
+  background-color: #f3f4f6;
 }
 
 .c4:active:not([disabled]) {
-  background-color: rgba(208,215,222,0.48);
+  background-color: hsla(220,14%,94%,1);
 }
 
 .c4[aria-expanded=true] {
-  background-color: rgba(208,215,222,0.24);
-}
-
-.c4 svg {
-  color: #57606a;
-}
-
-.c4[data-no-visuals] {
-  color: #0969da;
-}
-
-.c4:has([data-component="ButtonCounter"]) {
-  color: #24292f;
-}
-
-.c4[data-component="IconButton"] {
-  width: var(--inner-action-size);
-  height: var(--inner-action-size);
+  background-color: hsla(220,14%,94%,1);
 }
 
 .c0 {
@@ -1795,34 +1694,36 @@ exports[`TextInput renders trailingAction icon button 1`] = `
       <button
         aria-label="iconLabel"
         className="c4"
-        data-component="IconButton"
-        data-size="medium"
         onClick={[MockFunction]}
         type="button"
       >
-        <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}
+        <span
+          className="c5"
         >
-          <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>
+          <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>
       </button>
     </span>
   </span>
@@ -1831,25 +1732,18 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 
 exports[`TextInput renders trailingAction text button 1`] = `
 .c2 {
-  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;
+  margin: 4px;
 }
 
 .c3 {
   border-radius: 6px;
-  border: 1px solid;
-  border-color: transparent;
+  border: 0;
+  border-color: rgba(27,31,36,0.15);
   font-family: inherit;
-  font-weight: 500;
-  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -1861,35 +1755,16 @@ exports[`TextInput renders trailingAction text button 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: #24292f;
-  background-color: transparent;
-  box-shadow: none;
+  display: grid;
+  grid-template-areas: "leadingIcon text trailingIcon";
   padding-top: 2px;
-  padding-right: 4px;
   padding-bottom: 2px;
   padding-left: 4px;
+  padding-right: 4px;
+  font-size: 12px;
+  color: #24292f;
+  background-color: transparent;
+  box-shadow: none;
   position: relative;
 }
 
@@ -1909,31 +1784,8 @@ 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: not-allowed;
-  box-shadow: none;
+  cursor: default;
   color: #8c959f;
 }
 
@@ -1941,125 +1793,40 @@ exports[`TextInput renders trailingAction text button 1`] = `
   color: inherit;
 }
 
-.c3 [data-component=ButtonCounter] {
-  font-size: 14px;
-}
-
-.c3[data-component=IconButton] {
-  display: inline-grid;
-  padding: unset;
-  place-content: center;
-  width: 32px;
-}
-
-.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:disabled svg {
+  opacity: 0.6;
 }
 
-.c3[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 4px;
-}
-
-.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) {
+.c3 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c3[data-size="large"][data-component=IconButton] {
-  width: 40px;
-  padding: unset;
-}
-
-.c3[data-component="block"] {
-  width: 100%;
-}
-
-.c3 [data-component="leadingVisual"] {
-  grid-area: leadingVisual;
+.c3 [data-component="leadingIcon"] {
+  grid-area: leadingIcon;
 }
 
 .c3 [data-component="text"] {
   grid-area: text;
-  line-height: calc(20/14);
-  white-space: nowrap;
-}
-
-.c3 [data-component="trailingVisual"] {
-  grid-area: trailingVisual;
 }
 
-.c3 [data-component="trailingAction"] {
-  margin-right: -4px;
+.c3 [data-component="trailingIcon"] {
+  grid-area: trailingIcon;
 }
 
-.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 [data-component=ButtonCounter] {
+  font-size: 12px;
 }
 
 .c3:hover:not([disabled]) {
-  background-color: rgba(208,215,222,0.32);
+  background-color: #f3f4f6;
 }
 
 .c3:active:not([disabled]) {
-  background-color: rgba(208,215,222,0.48);
+  background-color: hsla(220,14%,94%,1);
 }
 
 .c3[aria-expanded=true] {
-  background-color: rgba(208,215,222,0.24);
-}
-
-.c3 svg {
-  color: #57606a;
-}
-
-.c3[data-no-visuals] {
-  color: #0969da;
-}
-
-.c3:has([data-component="ButtonCounter"]) {
-  color: #24292f;
-}
-
-.c3[data-component="IconButton"] {
-  width: var(--inner-action-size);
-  height: var(--inner-action-size);
+  background-color: hsla(220,14%,94%,1);
 }
 
 .c0 {
@@ -2197,20 +1964,13 @@ exports[`TextInput renders trailingAction text button 1`] = `
   >
     <button
       className="c3"
-      data-component={null}
-      data-no-visuals={true}
       onClick={[MockFunction]}
       type="button"
     >
       <span
-        className="c4"
-        data-component="buttonContent"
+        data-component="text"
       >
-        <span
-          data-component="text"
-        >
-          Clear
-        </span>
+        Clear
       </span>
     </button>
   </span>
@@ -2219,25 +1979,18 @@ exports[`TextInput renders trailingAction text button 1`] = `
 
 exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 .c2 {
-  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;
+  margin: 4px;
 }
 
 .c4 {
   border-radius: 6px;
-  border: 1px solid;
-  border-color: transparent;
+  border: 0;
+  border-color: rgba(27,31,36,0.15);
   font-family: inherit;
-  font-weight: 500;
-  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -2249,35 +2002,16 @@ exports[`TextInput renders trailingAction text button with a tooltip 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: #24292f;
-  background-color: transparent;
-  box-shadow: none;
+  display: grid;
+  grid-template-areas: "leadingIcon text trailingIcon";
   padding-top: 2px;
-  padding-right: 4px;
   padding-bottom: 2px;
   padding-left: 4px;
+  padding-right: 4px;
+  font-size: 12px;
+  color: #24292f;
+  background-color: transparent;
+  box-shadow: none;
   position: relative;
 }
 
@@ -2297,31 +2031,8 @@ 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: not-allowed;
-  box-shadow: none;
+  cursor: default;
   color: #8c959f;
 }
 
@@ -2329,125 +2040,40 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   color: inherit;
 }
 
-.c4 [data-component=ButtonCounter] {
-  font-size: 14px;
+.c4:disabled svg {
+  opacity: 0.6;
 }
 
-.c4[data-component=IconButton] {
-  display: inline-grid;
-  padding: unset;
-  place-content: center;
-  width: 32px;
-}
-
-.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) {
+.c4 > :not(:last-child) {
   margin-right: 8px;
 }
 
-.c4[data-size="large"][data-component=IconButton] {
-  width: 40px;
-  padding: unset;
-}
-
-.c4[data-component="block"] {
-  width: 100%;
-}
-
-.c4 [data-component="leadingVisual"] {
-  grid-area: leadingVisual;
+.c4 [data-component="leadingIcon"] {
+  grid-area: leadingIcon;
 }
 
 .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="trailingIcon"] {
+  grid-area: trailingIcon;
 }
 
-.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 [data-component=ButtonCounter] {
+  font-size: 12px;
 }
 
 .c4:hover:not([disabled]) {
-  background-color: rgba(208,215,222,0.32);
+  background-color: #f3f4f6;
 }
 
 .c4:active:not([disabled]) {
-  background-color: rgba(208,215,222,0.48);
+  background-color: hsla(220,14%,94%,1);
 }
 
 .c4[aria-expanded=true] {
-  background-color: rgba(208,215,222,0.24);
-}
-
-.c4 svg {
-  color: #57606a;
-}
-
-.c4[data-no-visuals] {
-  color: #0969da;
-}
-
-.c4:has([data-component="ButtonCounter"]) {
-  color: #24292f;
-}
-
-.c4[data-component="IconButton"] {
-  width: var(--inner-action-size);
-  height: var(--inner-action-size);
+  background-color: hsla(220,14%,94%,1);
 }
 
 .c0 {
@@ -2810,20 +2436,13 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
     >
       <button
         className="c4"
-        data-component={null}
-        data-no-visuals={true}
         onClick={[MockFunction]}
         type="button"
       >
         <span
-          className="c5"
-          data-component="buttonContent"
+          data-component="text"
         >
-          <span
-            data-component="text"
-          >
-            Clear
-          </span>
+          Clear
         </span>
       </button>
     </span>
@@ -5132,7 +4751,6 @@ 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;
@@ -5727,12 +5345,11 @@ 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;
-  height: 40px;
+  font-size: 20px;
   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 7d484ce9385..d7f6f64a4e8 100644
--- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -58,7 +58,6 @@ 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);
@@ -801,7 +800,6 @@ 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);
@@ -1213,7 +1211,6 @@ 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);
@@ -1396,7 +1393,6 @@ 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);
@@ -2084,7 +2080,6 @@ 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;
@@ -2197,6 +2192,8 @@ 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;
@@ -2773,7 +2770,6 @@ 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;
@@ -2886,6 +2882,8 @@ 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;
@@ -3462,7 +3460,6 @@ 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);
@@ -3568,6 +3565,8 @@ 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;
@@ -4144,7 +4143,6 @@ 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);
@@ -4828,7 +4826,6 @@ 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);
@@ -5512,7 +5509,6 @@ 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);
@@ -6198,7 +6194,6 @@ 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);
@@ -6599,7 +6594,6 @@ 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);
@@ -7338,7 +7332,6 @@ 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);
@@ -8109,7 +8102,6 @@ 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);
@@ -8857,7 +8849,6 @@ 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);
@@ -9675,7 +9666,6 @@ 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);
@@ -10493,7 +10483,6 @@ 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);
@@ -11305,7 +11294,6 @@ 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);
@@ -12085,7 +12073,6 @@ 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);
@@ -12897,7 +12884,6 @@ 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);
@@ -13686,7 +13672,6 @@ 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;
@@ -13799,6 +13784,8 @@ 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;
@@ -14550,7 +14537,6 @@ 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);
@@ -15409,7 +15395,6 @@ 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);
@@ -15515,6 +15500,8 @@ 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;
@@ -16232,7 +16219,6 @@ 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);
@@ -16916,7 +16902,6 @@ 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);
@@ -17607,7 +17592,6 @@ 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 b81c6ee9d79..34f4e562d7d 100644
--- a/src/__tests__/__snapshots__/Token.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Token.test.tsx.snap
@@ -42,6 +42,8 @@ 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;
@@ -250,6 +252,8 @@ 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;
@@ -458,6 +462,8 @@ 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;
@@ -1067,6 +1073,8 @@ 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;
@@ -1167,6 +1175,8 @@ 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;
@@ -1293,6 +1303,8 @@ 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;
@@ -1482,6 +1494,8 @@ 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;
@@ -1658,6 +1672,8 @@ 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;
@@ -1834,6 +1850,8 @@ 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;
@@ -2366,6 +2384,8 @@ 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;
@@ -2447,6 +2467,8 @@ 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;
@@ -2623,6 +2645,8 @@ 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;
@@ -2799,6 +2823,8 @@ 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;
@@ -2911,6 +2937,8 @@ 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;
@@ -3087,6 +3115,8 @@ 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;
@@ -3252,6 +3282,8 @@ 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;
@@ -3417,6 +3449,8 @@ 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;
@@ -3916,6 +3950,8 @@ 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;
@@ -3997,6 +4033,8 @@ 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;
@@ -4088,6 +4126,8 @@ 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;
@@ -4182,6 +4222,8 @@ 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 ccf37a44ba0..1b8e1d59441 100644
--- a/src/drafts/MarkdownEditor/Toolbar.tsx
+++ b/src/drafts/MarkdownEditor/Toolbar.tsx
@@ -27,7 +27,6 @@ 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 7cd400623cc..55e9628e040 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} alignContent="start">
+        <ActionMenu.Button aria-label="Field type" leadingIcon={selectedType.icon}>
           {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} alignContent="start">
+        <ActionMenu.Button aria-label="Field type" leadingIcon={selectedType.icon}>
           {selectedType.name || 'Pick a field type'}
         </ActionMenu.Button>
         <ActionMenu.Overlay width="medium">
@@ -159,6 +159,14 @@ 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>
@@ -243,14 +251,25 @@ export function MultipleSelection(): JSX.Element {
 
       <Box sx={{width: 200}}>
         <ActionMenu>
-          <ActionMenu.Button variant="invisible" trailingIcon={GearIcon}>
+          <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'},
+            }}
+          >
             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 f40e78a9714..2125fbcc3b8 100644
--- a/src/stories/ActionMenu/fixtures.stories.tsx
+++ b/src/stories/ActionMenu/fixtures.stories.tsx
@@ -297,12 +297,7 @@ export function MemexTableMenu(): JSX.Element {
 
         <ActionMenu open={open} onOpenChange={setOpen}>
           <ActionMenu.Anchor>
-            <IconButton
-              size="small"
-              icon={TriangleDownIcon}
-              aria-label="Open Estimate column options menu"
-              sx={{padding: 0}}
-            />
+            <IconButton icon={TriangleDownIcon} aria-label="Open Estimate column options menu" sx={{padding: 0}} />
           </ActionMenu.Anchor>
 
           <ActionMenu.Overlay onClickOutside={handleClickOutside}>
@@ -385,9 +380,14 @@ 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,6 +402,11 @@ const ViewChangeButtons = ({setOpen}: {setOpen: (open: boolean) => void}) => (
         borderRadius: 0,
         mt: -2,
         mb: -2,
+        py: 3,
+        fontWeight: 'normal',
+        '&:hover': {
+          bg: 'canvas.inset',
+        },
       }}
     >
       Discard changes
@@ -422,7 +427,14 @@ export function MemexViewOptionsMenu(): JSX.Element {
         </Text>
         <ActionMenu open={open} onOpenChange={setOpen}>
           <ActionMenu.Anchor aria-label="Open View options menu">
-            <IconButton icon={TriangleDownIcon} size="small" aria-label="Open View options menu" />
+            <IconButton
+              icon={TriangleDownIcon}
+              sx={{
+                padding: '0 1px',
+                lineHeight: '18px',
+              }}
+              aria-label="Open View options menu"
+            />
           </ActionMenu.Anchor>
 
           <ActionMenu.Overlay width="medium">
@@ -507,7 +519,15 @@ export function MemexIteration(): JSX.Element {
       <h1>Memex Iteration Menu</h1>
 
       <ActionMenu>
-        <ActionMenu.Button variant="invisible" aria-label="Iteration duration">
+        <ActionMenu.Button
+          variant="invisible"
+          sx={{
+            fontWeight: 'normal',
+            color: 'fg.muted',
+            ':hover, :focus': {background: 'none !important', color: 'accent.fg'},
+          }}
+          aria-label="Iteration duration"
+        >
           {duration} {duration > 1 ? 'weeks' : 'week'}
         </ActionMenu.Button>
         <ActionMenu.Overlay width="medium">
@@ -548,7 +568,14 @@ 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} alignContent="start">
+          <ActionMenu.Button
+            aria-label="Field type"
+            leadingIcon={selectedType.icon}
+            sx={{
+              gridTemplateColumns: 'min-content 1fr min-content',
+              '[data-component="text"]': {textAlign: 'left'},
+            }}
+          >
             {selectedType.name}
           </ActionMenu.Button>
           <ActionMenu.Overlay width="medium">
@@ -576,7 +603,17 @@ export function MemexAddColumn(): JSX.Element {
           <TextInput id="duration" type="number" defaultValue="2" sx={{width: '6ch'}} />
 
           <ActionMenu>
-            <ActionMenu.Button id="duration" aria-label="Field type" alignContent="start">
+            <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'},
+              }}
+            >
               {durationUnit}
             </ActionMenu.Button>
             <ActionMenu.Overlay width="medium">
@@ -628,6 +665,7 @@ 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 d26b57ab871..a6aa2cd6d08 100644
--- a/src/stories/Overlay.stories.tsx
+++ b/src/stories/Overlay.stories.tsx
@@ -5,7 +5,6 @@ import {
   Overlay,
   ButtonGroup,
   Button,
-  IconButton,
   Text,
   Box,
   Checkbox,
@@ -196,12 +195,14 @@ export const MemexNestedOverlays = () => {
     <div>
       <ButtonGroup>
         <Button>Add iteration</Button>
-        <IconButton
+        <Button
           aria-label="Add custom iteration"
           ref={buttonRef}
           onClick={() => setOverlayOpen(!overlayOpen)}
-          icon={TriangleDownIcon}
-        />
+          sx={{paddingX: 2}}
+        >
+          <TriangleDownIcon />
+        </Button>
       </ButtonGroup>
       {overlayOpen && (
         <Overlay
@@ -268,12 +269,14 @@ export const NestedOverlays = () => {
       </div>
       <ButtonGroup>
         <Button>Star</Button>
-        <IconButton
+        <Button
           aria-label="Add this repository to a list"
           ref={buttonRef}
           onClick={() => setListOverlayOpen(!listOverlayOpen)}
-          icon={TriangleDownIcon}
-        />
+          sx={{paddingX: 2}}
+        >
+          <TriangleDownIcon />
+        </Button>
       </ButtonGroup>
       {listOverlayOpen && (
         <Overlay
diff --git a/src/stories/SelectPanel.stories.tsx b/src/stories/SelectPanel.stories.tsx
index 9cbb97a008d..509e2e47970 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 trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          <Button trailingIcon={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 trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          <Button trailingIcon={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 trailingAction={TriangleDownIcon} ref={buttonRef} onClick={() => setOpen(!open)}>
+      <Button trailingIcon={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 trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          <Button trailingIcon={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 trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          <Button trailingIcon={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 trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          <Button trailingIcon={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 trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          <Button trailingIcon={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 trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          <Button trailingIcon={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 trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          <Button trailingIcon={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
             {children ?? 'Select Labels'}
           </Button>
         )}