diff --git a/.changeset/flat-onions-sort.md b/.changeset/flat-onions-sort.md
new file mode 100644
index 00000000000..50ba08cfec0
--- /dev/null
+++ b/.changeset/flat-onions-sort.md
@@ -0,0 +1,7 @@
+---
+"@primer/react": major
+---
+
+- Changes `leadingIcon` and `trailingIcon` to `leadingVisual` and `trailingVisual`
+- Removes `Button.Counter` as a child component, replacing it with a `count` prop. This change allows us to use the `trailingVisual` slot for counters.
+- Removes the `outline` button variant as we wish to only support `invisible` buttons.
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png
index e254d01f8ec..3770975c4f6 100644
Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png
index 98ebae34e1e..df6c90e4146 100644
Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png
index 9bc8f5fdf00..a8b7e812923 100644
Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png
index c9bf7491e66..693c787ae10 100644
Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png
index e254d01f8ec..3770975c4f6 100644
Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png
index 517576b742f..4e8a052f2b6 100644
Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-linux.png
index 14d4cd19201..58e8719424b 100644
Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png
index 04de60b7160..ea16520491d 100644
Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png
index 517576b742f..4e8a052f2b6 100644
Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-colorblind-linux.png
index fc19b4d55e9..0ea6b9fd929 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-dimmed-linux.png
index 0a04b6f6495..1849ef53a06 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png
index b296d55c241..0fa6490aa87 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-linux.png
index 95db3a032a3..76bf0bd931c 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-tritanopia-linux.png
index fc19b4d55e9..0ea6b9fd929 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-colorblind-linux.png
index 69ba703d458..f870727a363 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-high-contrast-linux.png
index 18700963524..4403bc817b1 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-linux.png
index 8fd81685059..a9331f895d2 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-tritanopia-linux.png
index 69ba703d458..f870727a363 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Invisible-Variants-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
deleted file mode 100644
index aa0f3d2ac3a..00000000000
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-colorblind-linux.png and /dev/null 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
deleted file mode 100644
index e331fe785f4..00000000000
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-dimmed-linux.png and /dev/null 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
deleted file mode 100644
index 35074bda2ab..00000000000
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-high-contrast-linux.png and /dev/null 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
deleted file mode 100644
index aa0f3d2ac3a..00000000000
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-linux.png and /dev/null 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
deleted file mode 100644
index aa0f3d2ac3a..00000000000
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-tritanopia-linux.png and /dev/null 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
deleted file mode 100644
index e3f7ea01ccd..00000000000
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-colorblind-linux.png and /dev/null 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
deleted file mode 100644
index cbdddbc1c78..00000000000
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-high-contrast-linux.png and /dev/null 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
deleted file mode 100644
index e3f7ea01ccd..00000000000
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-linux.png and /dev/null 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
deleted file mode 100644
index e3f7ea01ccd..00000000000
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-tritanopia-linux.png and /dev/null 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..5d9402a7fcc 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..a7908879ad1 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..27b289bc580 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..5d9402a7fcc 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..5d9402a7fcc 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..bade62c029e 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..bed6d6eb663 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..8d898c8f5dc 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..bade62c029e 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-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..1fbbb8fdc1b 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-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Trailing-Visual-light-high-contrast-linux.png
index c248ed1477b..37b95b20f0f 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-sx-prop-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png
index cc4d3da3848..b1345fa9f86 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png
index cd4bb8ed290..b2d3643b14d 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png
index 0c313f1b66b..c195148b092 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png
index 6bf31872810..00e06843228 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png
index cc4d3da3848..b1345fa9f86 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png
index 9ac39b51608..f56eb01b67f 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png
index 8c5819900bd..cd74a59f033 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png
index 190a7f35052..9ecef7f8dd3 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png
index 9ac39b51608..f56eb01b67f 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-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
deleted file mode 100644
index 4dd3808cfe2..00000000000
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-colorblind-linux.png and /dev/null 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
deleted file mode 100644
index 056b04be74c..00000000000
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-dimmed-linux.png and /dev/null 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
deleted file mode 100644
index 3e52d73fc21..00000000000
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-high-contrast-linux.png and /dev/null 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
deleted file mode 100644
index 4dd3808cfe2..00000000000
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-linux.png and /dev/null 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
deleted file mode 100644
index 4dd3808cfe2..00000000000
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-tritanopia-linux.png and /dev/null 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
deleted file mode 100644
index b1e5d41ff7f..00000000000
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-colorblind-linux.png and /dev/null 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
deleted file mode 100644
index 59b74e43734..00000000000
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-high-contrast-linux.png and /dev/null 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
deleted file mode 100644
index b1e5d41ff7f..00000000000
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-linux.png and /dev/null 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
deleted file mode 100644
index b1e5d41ff7f..00000000000
Binary files a/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-tritanopia-linux.png and /dev/null 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..1fbbb8fdc1b 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-light-high-contrast-linux.png b/.playwright/snapshots/components/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-light-high-contrast-linux.png
index c248ed1477b..37b95b20f0f 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/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-colorblind-linux.png
index 2d2eee9a47a..bc812e7eec2 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-dimmed-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-dimmed-linux.png
index db60d55b6f9..e0849495c52 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-high-contrast-linux.png
index 44b9662d907..8a49fc90974 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-linux.png
index 58cbba5c126..9462346fc9f 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-tritanopia-linux.png
index 2d2eee9a47a..bc812e7eec2 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-colorblind-linux.png
index d46f9fb0edc..d0a09236846 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-high-contrast-linux.png
index e4ef3e5992c..12e70b97781 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-linux.png
index f5434ad23e6..273ed31b0af 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-tritanopia-linux.png
index d46f9fb0edc..d0a09236846 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-tritanopia-linux.png differ
diff --git a/docs/content/ActionMenu.mdx b/docs/content/ActionMenu.mdx
index dd2a8f8c6e8..13984d76a1f 100644
--- a/docs/content/ActionMenu.mdx
+++ b/docs/content/ActionMenu.mdx
@@ -190,7 +190,7 @@ const Example = () => {
 
   return (
     <ActionMenu>
-      <ActionMenu.Button leadingIcon={selectedType.icon}>{selectedType.name}</ActionMenu.Button>
+      <ActionMenu.Button leadingVisual={selectedType.icon}>{selectedType.name}</ActionMenu.Button>
       <ActionMenu.Overlay width="medium">
         <ActionList selectionVariant="single">
           {fieldTypes.map((type, index) => (
diff --git a/docs/content/Button.mdx b/docs/content/Button.mdx
index f0607d1f2dd..8c142ece4b9 100644
--- a/docs/content/Button.mdx
+++ b/docs/content/Button.mdx
@@ -31,14 +31,6 @@ The `danger` variant of `Button` is used to warn users about potentially destruc
 <Button variant="danger">Danger</Button>
 ```
 
-### Outline button
-
-The `outline` variant of `Button` is typically used as a secondary button
-
-```jsx live
-<Button variant="outline">Outline</Button>
-```
-
 ### Invisible button
 
 The `invisible` variant of `Button` indicates that the action is a low priority one.
@@ -68,11 +60,11 @@ It is recommended to use an octicon here.
 
 ```jsx live
 <>
-  <Button leadingIcon={SearchIcon}>Search</Button>
-  <Button trailingIcon={SearchIcon} sx={{mt: 2}}>
+  <Button leadingVisual={SearchIcon}>Search</Button>
+  <Button trailingVisual={SearchIcon} sx={{mt: 2}}>
     Search
   </Button>
-  <Button leadingIcon={SearchIcon} trailingIcon={CheckIcon} sx={{mt: 2}}>
+  <Button leadingVisual={SearchIcon} trailingVisual={CheckIcon} sx={{mt: 2}}>
     Search
   </Button>
 </>
@@ -98,17 +90,12 @@ A separate component called `IconButton` is used if the action shows only an ico
 </>
 ```
 
-### Counter component
+### Button with counter
 
-A common use case for primer is a button with a counter component which shows the child count value.
-We provide `Button.Counter` as a composite component which requires you to provide a number as child.
-The counter will match the `variant` styles of the parent button.
+To show a count value as a trailing visual inside `Button`, pass a value to the `count` prop. The counter will match the `variant` styles of the parent button.
 
 ```jsx live
-<Button>
-  Watch
-  <Button.Counter>1</Button.Counter>
-</Button>
+<Button count="1">Watch</Button>
 ```
 
 ### Block button
diff --git a/docs/content/drafts/PageHeader.mdx b/docs/content/drafts/PageHeader.mdx
index 44f751767bd..94befffe4d0 100644
--- a/docs/content/drafts/PageHeader.mdx
+++ b/docs/content/drafts/PageHeader.mdx
@@ -125,7 +125,7 @@ import {PageHeader} from '@primer/react/drafts'
     <PageHeader.Actions>
       <IconButton aria-label="Workflows" icon={WorkflowIcon} />
       <IconButton aria-label="Insights" icon={GraphIcon} />
-      <Button variant="primary" trailingIcon={TriangleDownIcon}>
+      <Button variant="primary" trailingVisual={TriangleDownIcon}>
         Add Item
       </Button>
       <IconButton aria-label="Settings" icon={GearIcon} />
@@ -212,7 +212,7 @@ import {PageHeader} from '@primer/react/drafts'
     <PageHeader.ParentLink href="http://github.com">Parent Link</PageHeader.ParentLink>
 
     <PageHeader.ContextAreaActions>
-      <Button size="small" leadingIcon={GitBranchIcon}>
+      <Button size="small" leadingVisual={GitBranchIcon}>
         Main
       </Button>
       <IconButton size="small" aria-label="More Options" icon={KebabHorizontalIcon} />
@@ -241,7 +241,7 @@ import {PageHeader} from '@primer/react/drafts'
     </PageHeader.ContextBar>
 
     <PageHeader.ContextAreaActions>
-      <Button size="small" leadingIcon={GitBranchIcon}>
+      <Button size="small" leadingVisual={GitBranchIcon}>
         Main
       </Button>
       <IconButton size="small" aria-label="More Options" icon={KebabHorizontalIcon} />
@@ -274,7 +274,7 @@ import {PageHeader} from '@primer/react/drafts'
     </PageHeader.ContextBar>
 
     <PageHeader.ContextAreaActions hidden={false}>
-      <Button size="small" leadingIcon={GitBranchIcon}>
+      <Button size="small" leadingVisual={GitBranchIcon}>
         Main
       </Button>
       <IconButton size="small" aria-label="More Options" icon={KebabHorizontalIcon} />
diff --git a/e2e/components/Button.test.ts b/e2e/components/Button.test.ts
index 95863abb376..d9a4755ab1a 100644
--- a/e2e/components/Button.test.ts
+++ b/e2e/components/Button.test.ts
@@ -275,40 +275,6 @@ test.describe('Button', () => {
     }
   })
 
-  test.describe('Outline', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-button-features--outline',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Button.Outline.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-button-features--outline',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
-              },
-            },
-          })
-        })
-      })
-    }
-  })
-
   test.describe('Primary', () => {
     for (const theme of themes) {
       test.describe(theme, () => {
diff --git a/e2e/components/LinkButton.test.ts b/e2e/components/LinkButton.test.ts
index 31e0c906172..98a92c22704 100644
--- a/e2e/components/LinkButton.test.ts
+++ b/e2e/components/LinkButton.test.ts
@@ -241,40 +241,6 @@ test.describe('LinkButton', () => {
     }
   })
 
-  test.describe('Outline', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-linkbutton-features--outline',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Outline.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-linkbutton-features--outline',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
-              },
-            },
-          })
-        })
-      })
-    }
-  })
-
   test.describe('Primary', () => {
     for (const theme of themes) {
       test.describe(theme, () => {
diff --git a/generated/components.json b/generated/components.json
index 293c88d1410..fff363308ce 100644
--- a/generated/components.json
+++ b/generated/components.json
@@ -884,6 +884,12 @@
           "type": "React.ReactNode",
           "description": "The content of the button."
         },
+        {
+          "name": "count",
+          "required": true,
+          "type": "number | string",
+          "description": "For counter buttons, the number to display."
+        },
         {
           "name": "variant",
           "type": "| 'default'\n| 'primary'\n| 'danger'\n| 'outline'\n| 'invisible'",
@@ -922,24 +928,7 @@
       "passthrough": {
         "element": "button",
         "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes"
-      },
-      "subcomponents": [
-        {
-          "name": "Button.Counter",
-          "props": [
-            {
-              "name": "children",
-              "required": true,
-              "type": "number",
-              "description": "The counter value."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject"
-            }
-          ]
-        }
-      ]
+      }
     },
     "icon_button": {
       "id": "icon_button",
diff --git a/src/ActionMenu/ActionMenu.examples.stories.tsx b/src/ActionMenu/ActionMenu.examples.stories.tsx
index f7391545f4a..3838ec2261f 100644
--- a/src/ActionMenu/ActionMenu.examples.stories.tsx
+++ b/src/ActionMenu/ActionMenu.examples.stories.tsx
@@ -30,7 +30,7 @@ export const GroupsAndDescriptions = () => {
 
   return (
     <ActionMenu open>
-      <ActionMenu.Button variant="default" trailingIcon={GearIcon}>
+      <ActionMenu.Button variant="default" trailingVisual={GearIcon}>
         Milestone
       </ActionMenu.Button>
       <ActionMenu.Overlay width="medium">
@@ -201,7 +201,7 @@ export const MixedSelection = () => {
 
   return (
     <ActionMenu>
-      <ActionMenu.Button leadingIcon={selectedOption ? selectedOption.icon : undefined}>
+      <ActionMenu.Button leadingVisual={selectedOption ? selectedOption.icon : undefined}>
         {selectedOption ? `Group by ${selectedOption.text}` : 'Group items by'}
       </ActionMenu.Button>
       <ActionMenu.Overlay width="medium">
diff --git a/src/Button/Button.dev.stories.tsx b/src/Button/Button.dev.stories.tsx
index f995b8f4869..f6f12ce9a4e 100644
--- a/src/Button/Button.dev.stories.tsx
+++ b/src/Button/Button.dev.stories.tsx
@@ -11,23 +11,20 @@ export const InvisibleVariants = () => {
   return (
     <div style={{display: 'flex', flexDirection: 'row', gap: '1rem'}}>
       <Button variant="invisible">Button</Button>
-      <Button variant="invisible" leadingIcon={SearchIcon}>
+      <Button variant="invisible" leadingVisual={SearchIcon}>
         Button
       </Button>
       <Button variant="invisible" trailingAction={TriangleDownIcon}>
         Button
       </Button>
-      <Button variant="primary">
+      <Button variant="primary" count={count}>
         Button
-        <Button.Counter>{count}</Button.Counter>
       </Button>
-      <Button variant="invisible" leadingIcon={EyeIcon}>
+      <Button variant="invisible" leadingVisual={EyeIcon} count={count}>
         Button
-        <Button.Counter>{count}</Button.Counter>
       </Button>
-      <Button variant="invisible" leadingIcon={EyeIcon} trailingAction={TriangleDownIcon}>
+      <Button variant="invisible" leadingVisual={EyeIcon} trailingAction={TriangleDownIcon} count={count}>
         Button
-        <Button.Counter>{count}</Button.Counter>
       </Button>
       <IconButton icon={TriangleDownIcon} variant="invisible" aria-label="Invisible" />
     </div>
@@ -67,7 +64,7 @@ export const TestSxProp = () => {
       >
         Pink
       </Button>
-      <Button leadingIcon={SearchIcon} variant="invisible" sx={{color: 'deeppink'}}>
+      <Button leadingVisual={SearchIcon} variant="invisible" sx={{color: 'deeppink'}}>
         Pink
       </Button>
       <Button
@@ -89,9 +86,8 @@ export const TestSxProp = () => {
       <Button size="small" block variant="invisible" sx={{width: 320}}>
         Overriden Block
       </Button>
-      <Button>
+      <Button sx={{fontSize: 32}} count={count}>
         Watch
-        <Button.Counter sx={{fontSize: 32}}>{count}</Button.Counter>
       </Button>
     </div>
   )
diff --git a/src/Button/Button.docs.json b/src/Button/Button.docs.json
index 4fc26b7b1bc..255b2d17732 100644
--- a/src/Button/Button.docs.json
+++ b/src/Button/Button.docs.json
@@ -11,6 +11,12 @@
       "type": "React.ReactNode",
       "description": "The content of the button."
     },
+    {
+      "name": "count",
+      "required": true,
+      "type": "number | string",
+      "description": "For counter buttons, the number to display."
+    },
     {
       "name": "variant",
       "type": "| 'default'\n| 'primary'\n| 'danger'\n| 'outline'\n| 'invisible'",
@@ -49,22 +55,5 @@
   "passthrough": {
     "element": "button",
     "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes"
-  },
-  "subcomponents": [
-    {
-      "name": "Button.Counter",
-      "props": [
-        {
-          "name": "children",
-          "required": true,
-          "type": "number",
-          "description": "The counter value."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject"
-        }
-      ]
-    }
-  ]
-}
\ No newline at end of file
+  }
+}
diff --git a/src/Button/Button.features.stories.tsx b/src/Button/Button.features.stories.tsx
index c92ffa956d9..96197d0692e 100644
--- a/src/Button/Button.features.stories.tsx
+++ b/src/Button/Button.features.stories.tsx
@@ -12,18 +12,15 @@ export const Danger = () => <Button variant="danger">Danger</Button>
 
 export const Invisible = () => <Button variant="invisible">Invisible</Button>
 
-export const Outline = () => <Button variant="outline">Outline</Button>
+export const LeadingVisual = () => <Button leadingVisual={HeartIcon}>Leading visual</Button>
 
-export const LeadingVisual = () => <Button leadingIcon={HeartIcon}>Leading visual</Button>
-
-export const TrailingVisual = () => <Button trailingIcon={EyeIcon}>Trailing visual</Button>
+export const TrailingVisual = () => <Button trailingVisual={EyeIcon}>Trailing visual</Button>
 
 export const TrailingCounter = () => {
   const [count, setCount] = useState(0)
   return (
-    <Button onClick={() => setCount(count + 1)}>
+    <Button onClick={() => setCount(count + 1)} count={count}>
       Watch
-      <Button.Counter>{count}</Button.Counter>
     </Button>
   )
 }
@@ -32,45 +29,29 @@ export const TrailingCounterAllVariants = () => {
   const [count, setCount] = useState(0)
   return (
     <div style={{display: 'flex', flexDirection: 'row', gap: '1rem'}}>
-      <Button onClick={() => setCount(count + 1)}>
-        Watch
-        <Button.Counter>{count}</Button.Counter>
-      </Button>
-      <Button disabled onClick={() => setCount(count + 1)}>
-        Watch
-        <Button.Counter>{count}</Button.Counter>
-      </Button>
-      <Button variant="primary" onClick={() => setCount(count + 1)}>
+      <Button onClick={() => setCount(count + 1)} count={count}>
         Watch
-        <Button.Counter>{count}</Button.Counter>
       </Button>
-      <Button variant="primary" disabled onClick={() => setCount(count + 1)}>
+      <Button disabled onClick={() => setCount(count + 1)} count={count}>
         Watch
-        <Button.Counter>{count}</Button.Counter>
       </Button>
-      <Button variant="outline" onClick={() => setCount(count + 1)}>
+      <Button variant="primary" onClick={() => setCount(count + 1)} count={count}>
         Watch
-        <Button.Counter>{count}</Button.Counter>
       </Button>
-      <Button variant="outline" disabled onClick={() => setCount(count + 1)}>
+      <Button variant="primary" disabled onClick={() => setCount(count + 1)} count={count}>
         Watch
-        <Button.Counter>{count}</Button.Counter>
       </Button>
-      <Button variant="danger" onClick={() => setCount(count + 1)}>
+      <Button variant="danger" onClick={() => setCount(count + 1)} count={count}>
         Watch
-        <Button.Counter>{count}</Button.Counter>
       </Button>
-      <Button variant="danger" disabled onClick={() => setCount(count + 1)}>
+      <Button variant="danger" disabled onClick={() => setCount(count + 1)} count={count}>
         Watch
-        <Button.Counter>{count}</Button.Counter>
       </Button>
-      <Button variant="invisible" onClick={() => setCount(count + 1)}>
+      <Button variant="invisible" onClick={() => setCount(count + 1)} count={count}>
         Watch
-        <Button.Counter>{count}</Button.Counter>
       </Button>
-      <Button variant="invisible" disabled onClick={() => setCount(count + 1)}>
+      <Button variant="invisible" disabled onClick={() => setCount(count + 1)} count={count}>
         Watch
-        <Button.Counter>{count}</Button.Counter>
       </Button>
     </div>
   )
diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx
index daa7ec54ee3..c13542facee 100644
--- a/src/Button/Button.stories.tsx
+++ b/src/Button/Button.stories.tsx
@@ -1,11 +1,12 @@
 import React from 'react'
 import {EyeClosedIcon, EyeIcon, SearchIcon, TriangleDownIcon, XIcon, HeartIcon} from '@primer/octicons-react'
-import {Meta, StoryFn} from '@storybook/react'
+import type {Meta, StoryObj} from '@storybook/react'
 import {Button} from '.'
 import {OcticonArgType} from '../utils/story-helpers'
 
-export default {
+const meta: Meta<typeof Button> = {
   title: 'Components/Button',
+  component: Button,
   argTypes: {
     size: {
       control: {
@@ -35,10 +36,10 @@ export default {
         type: 'boolean',
       },
     },
-    leadingIcon: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]),
-    trailingIcon: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]),
+    leadingVisual: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]),
+    trailingVisual: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]),
     trailingAction: OcticonArgType([TriangleDownIcon]),
-    trailingVisualCount: {
+    count: {
       control: {
         type: 'number',
       },
@@ -50,21 +51,18 @@ export default {
     disabled: false,
     variant: 'default',
     alignContent: 'center',
-    trailingIcon: null,
-    leadingIcon: null,
+    trailingVisual: null,
+    leadingVisual: null,
     trailingAction: null,
-    trailingVisualCount: undefined,
+    count: undefined,
   },
-} as Meta<typeof Button>
+}
+
+export default meta
+type Story = StoryObj<typeof Button>
 
-export const Playground: StoryFn = args => {
-  const {trailingVisualCount, ...rest} = args
-  return (
-    <Button {...rest}>
-      Default
-      {typeof trailingVisualCount === 'undefined' ? null : <Button.Counter>{trailingVisualCount}</Button.Counter>}
-    </Button>
-  )
+export const Playground: Story = {
+  render: args => <Button {...args}>Button</Button>,
 }
 
 export const Default = () => <Button>Default</Button>
diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
index f4f02ce123b..87d6f69cecb 100644
--- a/src/Button/Button.tsx
+++ b/src/Button/Button.tsx
@@ -9,10 +9,10 @@ const ButtonComponent = forwardRef(({children, sx: sxProp = defaultSxProp, ...pr
   let sxStyles = sxProp
 
   // grap the button props that have associated data attributes in the styles
-  const {block, size, leadingIcon, trailingIcon, trailingAction} = props
+  const {block, size, leadingVisual, trailingVisual, trailingAction} = props
 
   if (sxProp !== null && Object.keys(sxProp).length > 0) {
-    sxStyles = generateCustomSxProp({block, size, leadingIcon, trailingIcon, trailingAction}, sxProp)
+    sxStyles = generateCustomSxProp({block, size, leadingVisual, trailingVisual, trailingAction}, sxProp)
   }
 
   return (
@@ -63,13 +63,14 @@ sx={{
 // We need to make sure we append the customCSSSelector to the original class selector. i.e & - > &[data-attribute="Icon"][data-size="small"]
 */
 export function generateCustomSxProp(
-  props: Partial<Pick<ButtonProps, 'size' | 'block' | 'leadingIcon' | 'trailingIcon' | 'trailingAction'>>,
+  props: Partial<Pick<ButtonProps, 'size' | 'block' | 'leadingVisual' | 'trailingVisual' | 'trailingAction'>>,
   providedSx: BetterSystemStyleObject,
 ) {
   // Possible data attributes: data-size, data-block, data-no-visuals
   const size = props.size && props.size !== 'medium' ? `[data-size="${props.size}"]` : '' // medium is a default size therefore it doesn't have a data attribute that used for styling
   const block = props.block ? `[data-block="block"]` : ''
-  const noVisuals = props.leadingIcon || props.trailingIcon || props.trailingAction ? '' : '[data-no-visuals="true"]'
+  const noVisuals =
+    props.leadingVisual || props.trailingVisual || props.trailingAction ? '' : '[data-no-visuals="true"]'
 
   // this is custom selector. We need to make sure we add the data attributes to the base css class (& -> &[data-attributename="value"]])
   const cssSelector = `&${size}${block}${noVisuals}` // &[data-size="small"][data-block="block"][data-no-visuals="true"]
diff --git a/src/Button/ButtonBase.tsx b/src/Button/ButtonBase.tsx
index 18e38f40df8..eea7ed44ec9 100644
--- a/src/Button/ButtonBase.tsx
+++ b/src/Button/ButtonBase.tsx
@@ -7,13 +7,15 @@ import {ButtonProps, StyledButton} from './types'
 import {getVariantStyles, getButtonStyles, getAlignContentSize} from './styles'
 import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
 import {defaultSxProp} from '../utils/defaultSxProp'
+import CounterLabel from '../CounterLabel'
 
 const ButtonBase = forwardRef(
   ({children, as: Component = 'button', sx: sxProp = defaultSxProp, ...props}, forwardedRef): JSX.Element => {
     const {
-      leadingIcon: LeadingIcon,
-      trailingIcon: TrailingIcon,
+      leadingVisual: LeadingVisual,
+      trailingVisual: TrailingVisual,
       trailingAction: TrailingAction,
+      count: count,
       icon: Icon,
       variant = 'default',
       size = 'medium',
@@ -65,24 +67,33 @@ const ButtonBase = forwardRef(
         ref={innerRef}
         data-block={block ? 'block' : null}
         data-size={size === 'small' || size === 'large' ? size : undefined}
-        data-no-visuals={!LeadingIcon && !TrailingIcon && !TrailingAction ? true : undefined}
+        data-no-visuals={!LeadingVisual && !TrailingVisual && !TrailingAction ? true : undefined}
       >
         {Icon ? (
           <Icon />
         ) : (
           <>
             <Box as="span" data-component="buttonContent" sx={getAlignContentSize(alignContent)}>
-              {LeadingIcon && (
+              {LeadingVisual && (
                 <Box as="span" data-component="leadingVisual" sx={{...iconWrapStyles}}>
-                  <LeadingIcon />
+                  <LeadingVisual />
                 </Box>
               )}
               {children && <span data-component="text">{children}</span>}
-              {TrailingIcon && (
+              {TrailingVisual && (
                 <Box as="span" data-component="trailingVisual" sx={{...iconWrapStyles}}>
-                  <TrailingIcon />
+                  <TrailingVisual />
                 </Box>
               )}
+              {count !== undefined && !TrailingVisual ? (
+                <Box as="span" data-component="trailingVisual" sx={{...iconWrapStyles}}>
+                  <CounterLabel data-component="ButtonCounter">{count}</CounterLabel>
+                </Box>
+              ) : TrailingVisual ? (
+                <Box as="span" data-component="trailingVisual" sx={{...iconWrapStyles}}>
+                  <TrailingVisual />
+                </Box>
+              ) : null}
             </Box>
             {TrailingAction && (
               <Box as="span" data-component="trailingAction" sx={{...iconWrapStyles}}>
diff --git a/src/Button/ButtonCounter.tsx b/src/Button/ButtonCounter.tsx
deleted file mode 100644
index 24f43489423..00000000000
--- a/src/Button/ButtonCounter.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react'
-import {SxProp} from '../sx'
-import CounterLabel from '../CounterLabel'
-import {defaultSxProp} from '../utils/defaultSxProp'
-
-export type CounterProps = {
-  children: number
-} & SxProp
-
-const Counter = ({children, sx: sxProp = defaultSxProp, ...props}: CounterProps) => {
-  // we need to make sure we add the sx styles to the css selector that has the highest specificity.
-  const cssSelector = `&[data-component="ButtonCounter"]`
-
-  const counterButtonStyles = {
-    [cssSelector]: sxProp,
-  }
-  return (
-    <CounterLabel data-component="ButtonCounter" sx={{ml: 2, ...counterButtonStyles}} {...props}>
-      {children}
-    </CounterLabel>
-  )
-}
-
-export {Counter}
diff --git a/src/Button/LinkButton.features.stories.tsx b/src/Button/LinkButton.features.stories.tsx
index 310103e8462..eadd8ee570a 100644
--- a/src/Button/LinkButton.features.stories.tsx
+++ b/src/Button/LinkButton.features.stories.tsx
@@ -24,20 +24,14 @@ export const Invisible = () => (
   </Button>
 )
 
-export const Outline = () => (
-  <Button as="a" href="/" variant="outline">
-    Invisible
-  </Button>
-)
-
 export const LeadingVisual = () => (
-  <Button as="a" href="/" leadingIcon={HeartIcon}>
+  <Button as="a" href="/" leadingVisual={HeartIcon}>
     Leading visual
   </Button>
 )
 
 export const TrailingVisual = () => (
-  <Button as="a" href="/" trailingIcon={EyeIcon}>
+  <Button as="a" href="/" trailingVisual={EyeIcon}>
     Trailing visual
   </Button>
 )
diff --git a/src/Button/LinkButton.stories.tsx b/src/Button/LinkButton.stories.tsx
index 7ab539d1d71..d1e8cc25e0a 100644
--- a/src/Button/LinkButton.stories.tsx
+++ b/src/Button/LinkButton.stories.tsx
@@ -30,10 +30,10 @@ export default {
         type: 'boolean',
       },
     },
-    leadingIcon: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]),
-    trailingIcon: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]),
+    leadingVisual: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]),
+    trailingVisual: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]),
     trailingAction: OcticonArgType([ChevronRightIcon]),
-    trailingVisualCount: {
+    count: {
       control: {
         type: 'number',
       },
@@ -45,8 +45,8 @@ export default {
     size: 'medium',
     variant: 'default',
     alignContent: 'center',
-    trailingIcon: null,
-    leadingIcon: null,
+    trailingVisual: null,
+    leadingVisual: null,
     href: '/',
   },
 } as Meta<typeof Button>
diff --git a/src/Button/index.ts b/src/Button/index.ts
index d0519b22e70..35ed7077460 100644
--- a/src/Button/index.ts
+++ b/src/Button/index.ts
@@ -1,10 +1,5 @@
-import {ButtonComponent} from './Button'
-import {Counter} from './ButtonCounter'
 import {IconButton} from './IconButton'
 import {LinkButton} from './LinkButton'
 export type {ButtonProps, IconButtonProps} from './types'
 export {IconButton, LinkButton}
-
-export const Button = Object.assign(ButtonComponent, {
-  Counter,
-})
+export {ButtonComponent as Button} from './Button'
diff --git a/src/Button/styles.ts b/src/Button/styles.ts
index 67276efe797..8206ea7cf17 100644
--- a/src/Button/styles.ts
+++ b/src/Button/styles.ts
@@ -102,15 +102,15 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       },
     },
     invisible: {
-      color: 'accent.fg',
+      color: 'btn.text',
       backgroundColor: 'transparent',
       borderColor: 'transparent',
       boxShadow: 'none',
       '&:hover:not([disabled])': {
-        backgroundColor: 'btn.hoverBg',
+        backgroundColor: 'actionListItem.default.hoverBg',
       },
       '&:active:not([disabled])': {
-        backgroundColor: 'btn.selectedBg',
+        backgroundColor: 'actionListItem.default.activeBg',
       },
       '&:disabled': {
         color: 'primer.fg.disabled',
@@ -119,7 +119,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         },
       },
       '&[aria-expanded=true]': {
-        backgroundColor: 'btn.selectedBg',
+        backgroundColor: 'actionListItem.default.selectedBg',
       },
       '&[data-component="IconButton"][data-no-visuals]': {
         color: 'fg.muted',
@@ -134,7 +134,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         color: 'accent.fg',
       },
       '&:has([data-component="ButtonCounter"])': {
-        color: 'accent.fg',
+        color: 'btn.text',
       },
       '&:disabled[data-no-visuals]': {
         color: 'primer.fg.disabled',
diff --git a/src/Button/types.ts b/src/Button/types.ts
index 6ad81d0e9a0..77d437a63b6 100644
--- a/src/Button/types.ts
+++ b/src/Button/types.ts
@@ -8,7 +8,7 @@ export const StyledButton = styled.button<SxProp>`
   ${sx};
 `
 
-export type VariantType = 'default' | 'primary' | 'invisible' | 'danger' | 'outline'
+export type VariantType = 'default' | 'primary' | 'invisible' | 'danger'
 
 export type Size = 'small' | 'medium' | 'large'
 
@@ -46,11 +46,11 @@ export type ButtonProps = {
   /**
    * The leading icon comes before button content
    */
-  leadingIcon?: React.ComponentType | null | undefined
+  leadingVisual?: React.ComponentType | null | undefined
   /**
    * The trailing icon comes after button content
    */
-  trailingIcon?: React.ComponentType | null | undefined
+  trailingVisual?: React.ComponentType | null | undefined
   /**
    * Trailing action appears to the right of the trailing visual and is always locked to the end
    */
@@ -60,6 +60,7 @@ export type ButtonProps = {
    * Content alignment for when visuals are present
    */
   alignContent?: AlignContent
+  count?: number
 } & ButtonBaseProps
 
 export type IconButtonProps = ButtonA11yProps & {
diff --git a/src/Overlay/Overlay.features.stories.tsx b/src/Overlay/Overlay.features.stories.tsx
index 3804b59d8b4..50cdfb361e8 100644
--- a/src/Overlay/Overlay.features.stories.tsx
+++ b/src/Overlay/Overlay.features.stories.tsx
@@ -306,7 +306,7 @@ export const NestedOverlays = () => {
               variant="invisible"
               ref={secondaryButtonRef}
               sx={{px: 2, mx: 2, display: 'flex'}}
-              leadingIcon={PlusIcon}
+              leadingVisual={PlusIcon}
               onClick={() => setCreateListOverlayOpen(!createListOverlayOpen)}
             >
               Create list
diff --git a/src/PageHeader/PageHeader.examples.stories.tsx b/src/PageHeader/PageHeader.examples.stories.tsx
index 5377cd5897c..18435daae55 100644
--- a/src/PageHeader/PageHeader.examples.stories.tsx
+++ b/src/PageHeader/PageHeader.examples.stories.tsx
@@ -78,7 +78,7 @@ export const PullRequestPage = () => (
           <Hidden when={['narrow']}>
             <Box sx={{display: 'flex', gap: 2}}>
               <Button>Edit</Button>
-              <Button leadingIcon={CodeIcon}>Code</Button>
+              <Button leadingVisual={CodeIcon}>Code</Button>
             </Box>
           </Hidden>
         </PageHeader.Actions>
@@ -134,7 +134,7 @@ export const FilesPage = () => (
       <PageHeader.ContextArea>
         <PageHeader.ParentLink>Files</PageHeader.ParentLink>
         <PageHeader.ContextAreaActions>
-          <Button size="small" leadingIcon={GitBranchIcon}>
+          <Button size="small" leadingVisual={GitBranchIcon}>
             Main
           </Button>
           <IconButton size="small" aria-label="More" icon={KebabHorizontalIcon} />
@@ -180,7 +180,7 @@ export const WithPageLayout = () => {
               <Hidden when={['narrow']}>
                 <Box sx={{display: 'flex'}}>
                   <Button>Edit</Button>
-                  <Button leadingIcon={CodeIcon}>Code</Button>
+                  <Button leadingVisual={CodeIcon}>Code</Button>
                 </Box>
               </Hidden>
             </PageHeader.Actions>
diff --git a/src/PageHeader/PageHeader.features.stories.tsx b/src/PageHeader/PageHeader.features.stories.tsx
index d5801f2276d..3c56b9f7a5a 100644
--- a/src/PageHeader/PageHeader.features.stories.tsx
+++ b/src/PageHeader/PageHeader.features.stories.tsx
@@ -114,7 +114,7 @@ export const WithActions = () => (
         <PageHeader.Actions>
           <IconButton aria-label="Workflows" icon={WorkflowIcon} />
           <IconButton aria-label="Insights" icon={GraphIcon} />
-          <Button variant="primary" trailingIcon={TriangleDownIcon}>
+          <Button variant="primary" trailingVisual={TriangleDownIcon}>
             Add Item
           </Button>
           <IconButton aria-label="Settings" icon={GearIcon} />
@@ -211,7 +211,7 @@ export const WithParentLinkAndActionsOfContextArea = () => (
         <PageHeader.ParentLink href="http://github.com">Parent Link</PageHeader.ParentLink>
 
         <PageHeader.ContextAreaActions>
-          <Button size="small" leadingIcon={GitBranchIcon}>
+          <Button size="small" leadingVisual={GitBranchIcon}>
             Main
           </Button>
           <IconButton size="small" aria-label="More Options" icon={KebabHorizontalIcon} />
@@ -246,7 +246,7 @@ export const WithContextBarAndActionsOfContextArea = () => (
         </PageHeader.ContextBar>
 
         <PageHeader.ContextAreaActions>
-          <Button size="small" leadingIcon={GitBranchIcon}>
+          <Button size="small" leadingVisual={GitBranchIcon}>
             Main
           </Button>
           <IconButton size="small" aria-label="More Options" icon={KebabHorizontalIcon} />
diff --git a/src/PageHeader/PageHeader.stories.tsx b/src/PageHeader/PageHeader.stories.tsx
index 0e8b3ce3565..bb4fbd8332b 100644
--- a/src/PageHeader/PageHeader.stories.tsx
+++ b/src/PageHeader/PageHeader.stories.tsx
@@ -203,7 +203,7 @@ export const Playground: Story = args => (
         </PageHeader.ContextBar>
 
         <PageHeader.ContextAreaActions hidden={!args.hasContextAreaAction}>
-          <Button size="small" leadingIcon={GitBranchIcon}>
+          <Button size="small" leadingVisual={GitBranchIcon}>
             Main
           </Button>
           <IconButton size="small" aria-label="More" icon={KebabHorizontalIcon} />
diff --git a/src/SegmentedControl/SegmentedControl.tsx b/src/SegmentedControl/SegmentedControl.tsx
index 47e67cbd786..424c057242e 100644
--- a/src/SegmentedControl/SegmentedControl.tsx
+++ b/src/SegmentedControl/SegmentedControl.tsx
@@ -111,7 +111,7 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
           The aria-label is only provided as a backup when the designer or engineer neglects to show a label for the SegmentedControl.
           The best thing to do is to have a visual label who's id is referenced using the `aria-labelledby` prop.
         */}
-        <ActionMenu.Button aria-label={ariaLabel} leadingIcon={getChildIcon(selectedChild)}>
+        <ActionMenu.Button aria-label={ariaLabel} leadingVisual={getChildIcon(selectedChild)}>
           {getChildText(selectedChild)}
         </ActionMenu.Button>
         <ActionMenu.Overlay aria-labelledby={ariaLabelledby}>
diff --git a/src/UnderlineNav2/styles.ts b/src/UnderlineNav2/styles.ts
index 8ce978d02d6..2ec42bd2eb7 100644
--- a/src/UnderlineNav2/styles.ts
+++ b/src/UnderlineNav2/styles.ts
@@ -68,7 +68,7 @@ export const moreBtnStyles = {
   boxShadow: 'none',
   paddingY: 1,
   paddingX: 2,
-  '& > span[data-component="trailingIcon"]': {
+  '& > span[data-component="trailingVisual"]': {
     marginLeft: 0,
   },
 }
diff --git a/src/__tests__/Button.types.test.tsx b/src/__tests__/Button.types.test.tsx
index a58e486eb33..26f804aaa6b 100644
--- a/src/__tests__/Button.types.test.tsx
+++ b/src/__tests__/Button.types.test.tsx
@@ -11,8 +11,8 @@ export function ShouldAcceptKnownButtonPropsAndDomProps() {
   return (
     <Button
       ref={buttonEl}
-      leadingIcon={() => <></>}
-      trailingIcon={() => <></>}
+      leadingVisual={() => <></>}
+      trailingVisual={() => <></>}
       size="medium"
       variant="primary"
       disabled
diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap
index 463dd0f2a73..2dad08ef16e 100644
--- a/src/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Button.test.tsx.snap
@@ -1455,7 +1455,7 @@ exports[`Button styles invisible button appropriately 1`] = `
   transition: 80ms cubic-bezier(0.65,0,0.35,1);
   -webkit-transition-property: color,fill,background-color,border-color;
   transition-property: color,fill,background-color,border-color;
-  color: accent.fg;
+  color: btn.text;
   background-color: transparent;
   box-shadow: none;
 }
@@ -1606,15 +1606,15 @@ exports[`Button styles invisible button appropriately 1`] = `
 }
 
 .c0:hover:not([disabled]) {
-  background-color: btn.hoverBg;
+  background-color: actionListItem.default.hoverBg;
 }
 
 .c0:active:not([disabled]) {
-  background-color: btn.selectedBg;
+  background-color: actionListItem.default.activeBg;
 }
 
 .c0[aria-expanded=true] {
-  background-color: btn.selectedBg;
+  background-color: actionListItem.default.selectedBg;
 }
 
 .c0[data-component="IconButton"][data-no-visuals] {
@@ -1626,7 +1626,7 @@ exports[`Button styles invisible button appropriately 1`] = `
 }
 
 .c0:has([data-component="ButtonCounter"]) {
-  color: accent.fg;
+  color: btn.text;
 }
 
 .c0:disabled[data-no-visuals] {
diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 12f447b6d76..f633ffb7f4c 100644
--- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -1287,7 +1287,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   transition: 80ms cubic-bezier(0.65,0,0.35,1);
   -webkit-transition-property: color,fill,background-color,border-color;
   transition-property: color,fill,background-color,border-color;
-  color: #0969da;
+  color: #24292f;
   background-color: transparent;
   box-shadow: none;
 }
@@ -1438,15 +1438,15 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 }
 
 .c4:hover:not([disabled]) {
-  background-color: #f3f4f6;
+  background-color: rgba(208,215,222,0.32);
 }
 
 .c4:active:not([disabled]) {
-  background-color: hsla(220,14%,94%,1);
+  background-color: rgba(208,215,222,0.48);
 }
 
 .c4[aria-expanded=true] {
-  background-color: hsla(220,14%,94%,1);
+  background-color: rgba(208,215,222,0.24);
 }
 
 .c4[data-component="IconButton"][data-no-visuals] {
@@ -1458,7 +1458,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 }
 
 .c4:has([data-component="ButtonCounter"]) {
-  color: #0969da;
+  color: #24292f;
 }
 
 .c4:disabled[data-no-visuals] {
@@ -1935,7 +1935,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
   transition: 80ms cubic-bezier(0.65,0,0.35,1);
   -webkit-transition-property: color,fill,background-color,border-color;
   transition-property: color,fill,background-color,border-color;
-  color: #0969da;
+  color: #24292f;
   background-color: transparent;
   box-shadow: none;
 }
@@ -2086,15 +2086,15 @@ exports[`TextInput renders trailingAction text button 1`] = `
 }
 
 .c3:hover:not([disabled]) {
-  background-color: #f3f4f6;
+  background-color: rgba(208,215,222,0.32);
 }
 
 .c3:active:not([disabled]) {
-  background-color: hsla(220,14%,94%,1);
+  background-color: rgba(208,215,222,0.48);
 }
 
 .c3[aria-expanded=true] {
-  background-color: hsla(220,14%,94%,1);
+  background-color: rgba(208,215,222,0.24);
 }
 
 .c3[data-component="IconButton"][data-no-visuals] {
@@ -2106,7 +2106,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
 }
 
 .c3:has([data-component="ButtonCounter"]) {
-  color: #0969da;
+  color: #24292f;
 }
 
 .c3:disabled[data-no-visuals] {
@@ -2338,7 +2338,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   transition: 80ms cubic-bezier(0.65,0,0.35,1);
   -webkit-transition-property: color,fill,background-color,border-color;
   transition-property: color,fill,background-color,border-color;
-  color: #0969da;
+  color: #24292f;
   background-color: transparent;
   box-shadow: none;
 }
@@ -2489,15 +2489,15 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 }
 
 .c4:hover:not([disabled]) {
-  background-color: #f3f4f6;
+  background-color: rgba(208,215,222,0.32);
 }
 
 .c4:active:not([disabled]) {
-  background-color: hsla(220,14%,94%,1);
+  background-color: rgba(208,215,222,0.48);
 }
 
 .c4[aria-expanded=true] {
-  background-color: hsla(220,14%,94%,1);
+  background-color: rgba(208,215,222,0.24);
 }
 
 .c4[data-component="IconButton"][data-no-visuals] {
@@ -2509,7 +2509,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 }
 
 .c4:has([data-component="ButtonCounter"]) {
-  color: #0969da;
+  color: #24292f;
 }
 
 .c4:disabled[data-no-visuals] {
diff --git a/src/drafts/MarkdownEditor/_Footer.tsx b/src/drafts/MarkdownEditor/_Footer.tsx
index 077b418598f..8b94cc5a295 100644
--- a/src/drafts/MarkdownEditor/_Footer.tsx
+++ b/src/drafts/MarkdownEditor/_Footer.tsx
@@ -64,7 +64,7 @@ const FileUploadButton = memo(({fileDraggedOver, ...props}: Partial<ButtonProps>
   return (
     <Button
       variant="invisible"
-      leadingIcon={ImageIcon}
+      leadingVisual={ImageIcon}
       size="small"
       sx={{color: 'fg.default', fontWeight: fileDraggedOver ? 'bold' : 'normal', px: 2}}
       onMouseDown={(e: React.MouseEvent) => {
@@ -88,7 +88,7 @@ const MarkdownSupportedHint = memo(() => {
 
   return (
     <LinkButton
-      leadingIcon={MarkdownIcon}
+      leadingVisual={MarkdownIcon}
       variant="invisible"
       size="small"
       sx={{color: 'inherit', fontWeight: 'normal', px: 2}}
diff --git a/src/drafts/MarkdownEditor/_ViewSwitch.tsx b/src/drafts/MarkdownEditor/_ViewSwitch.tsx
index 324f5c4673a..f510e3e7cc1 100644
--- a/src/drafts/MarkdownEditor/_ViewSwitch.tsx
+++ b/src/drafts/MarkdownEditor/_ViewSwitch.tsx
@@ -47,7 +47,7 @@ export const ViewSwitch = ({selectedView, onViewSelect, onLoadPreview, disabled}
       {condensed ? (
         <IconButton {...sharedProps} disabled={disabled} icon={icon} aria-label={label} />
       ) : (
-        <Button {...sharedProps} leadingIcon={icon} disabled={disabled}>
+        <Button {...sharedProps} leadingVisual={icon} disabled={disabled}>
           {label}
         </Button>
       )}
diff --git a/src/stories/deprecated/ActionMenu.stories.tsx b/src/stories/deprecated/ActionMenu.stories.tsx
index f6ee3578781..cf2ab573685 100644
--- a/src/stories/deprecated/ActionMenu.stories.tsx
+++ b/src/stories/deprecated/ActionMenu.stories.tsx
@@ -195,7 +195,7 @@ export function ComplexListStory(): JSX.Element {
               groupId: '1',
               renderItem: props => <ActionList.Item style={{color: 'rebeccapurple'}} {...props} />,
               trailingText: '⌘S', // backward compatible
-              trailingIcon: ArrowRightIcon, // backward compatible
+              trailingVisual: ArrowRightIcon, // backward compatible
             },
             {
               leadingVisual: NoteIcon,