diff --git a/.changeset/tricky-scissors-walk.md b/.changeset/tricky-scissors-walk.md
new file mode 100644
index 00000000000..f183fb8f06d
--- /dev/null
+++ b/.changeset/tricky-scissors-walk.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert ConfirmationDialog to CSS modules behind feature flag
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-dark-colorblind-linux.png
new file mode 100644
index 00000000000..bb3b9478ef6
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-dark-dimmed-linux.png
new file mode 100644
index 00000000000..8b3557aeafd
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..615f1ebcc6c
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-dark-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-dark-linux.png
new file mode 100644
index 00000000000..bb3b9478ef6
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-dark-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..bb3b9478ef6
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-focus-dark-colorblind-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-focus-dark-colorblind-linux.png
new file mode 100644
index 00000000000..747c46f88f8
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-focus-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-focus-dark-dimmed-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-focus-dark-dimmed-linux.png
new file mode 100644
index 00000000000..7568e703e30
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-focus-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-focus-dark-high-contrast-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-focus-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..eb263d003fc
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-focus-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-focus-dark-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-focus-dark-linux.png
new file mode 100644
index 00000000000..747c46f88f8
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-focus-dark-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-focus-dark-tritanopia-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-focus-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..747c46f88f8
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-focus-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-focus-light-colorblind-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-focus-light-colorblind-linux.png
new file mode 100644
index 00000000000..707d9010c8b
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-focus-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-focus-light-high-contrast-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-focus-light-high-contrast-linux.png
new file mode 100644
index 00000000000..571990c0f1d
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-focus-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-focus-light-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-focus-light-linux.png
new file mode 100644
index 00000000000..707d9010c8b
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-focus-light-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-focus-light-tritanopia-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-focus-light-tritanopia-linux.png
new file mode 100644
index 00000000000..707d9010c8b
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-focus-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-light-colorblind-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-light-colorblind-linux.png
new file mode 100644
index 00000000000..2d843fb0261
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-light-high-contrast-linux.png
new file mode 100644
index 00000000000..0fda58b4300
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-light-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-light-linux.png
new file mode 100644
index 00000000000..2d843fb0261
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-light-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-light-tritanopia-linux.png
new file mode 100644
index 00000000000..2d843fb0261
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Default-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-colorblind-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-colorblind-linux.png
new file mode 100644
index 00000000000..4f07fdd21f0
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-dimmed-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-dimmed-linux.png
new file mode 100644
index 00000000000..0dd714251b6
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-high-contrast-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..9b83f879f19
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-linux.png
new file mode 100644
index 00000000000..2aeed9dd30a
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-tritanopia-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..2aeed9dd30a
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-colorblind-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-colorblind-linux.png
new file mode 100644
index 00000000000..f5b6e25b789
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-dimmed-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-dimmed-linux.png
new file mode 100644
index 00000000000..27fb2039ac6
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-high-contrast-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..9dad7bbe0e9
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-linux.png
new file mode 100644
index 00000000000..eee1463cda1
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-tritanopia-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..eee1463cda1
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-colorblind-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-colorblind-linux.png
new file mode 100644
index 00000000000..fba366ef6c2
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-high-contrast-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-high-contrast-linux.png
new file mode 100644
index 00000000000..a3e5deff406
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-linux.png
new file mode 100644
index 00000000000..8221f3c69f8
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-tritanopia-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-tritanopia-linux.png
new file mode 100644
index 00000000000..8221f3c69f8
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-colorblind-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-colorblind-linux.png
new file mode 100644
index 00000000000..7d1668550b9
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-high-contrast-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-high-contrast-linux.png
new file mode 100644
index 00000000000..8f3ed25d857
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-linux.png
new file mode 100644
index 00000000000..c9acf5d9f9b
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-tritanopia-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-tritanopia-linux.png
new file mode 100644
index 00000000000..c9acf5d9f9b
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-dark-colorblind-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-dark-colorblind-linux.png
new file mode 100644
index 00000000000..088971e7cc8
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-dark-dimmed-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-dark-dimmed-linux.png
new file mode 100644
index 00000000000..3bad0138a90
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-dark-high-contrast-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..21d9ebff6f8
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-dark-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-dark-linux.png
new file mode 100644
index 00000000000..088971e7cc8
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-dark-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-dark-tritanopia-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..088971e7cc8
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-focus-dark-colorblind-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-focus-dark-colorblind-linux.png
new file mode 100644
index 00000000000..eb32536e0a2
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-focus-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-focus-dark-dimmed-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-focus-dark-dimmed-linux.png
new file mode 100644
index 00000000000..a65abaac820
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-focus-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-focus-dark-high-contrast-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-focus-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..318d984eea1
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-focus-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-focus-dark-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-focus-dark-linux.png
new file mode 100644
index 00000000000..eb32536e0a2
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-focus-dark-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-focus-dark-tritanopia-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-focus-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..eb32536e0a2
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-focus-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-focus-light-colorblind-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-focus-light-colorblind-linux.png
new file mode 100644
index 00000000000..f9892cc1b83
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-focus-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-focus-light-high-contrast-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-focus-light-high-contrast-linux.png
new file mode 100644
index 00000000000..c061e235b4e
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-focus-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-focus-light-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-focus-light-linux.png
new file mode 100644
index 00000000000..f9892cc1b83
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-focus-light-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-focus-light-tritanopia-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-focus-light-tritanopia-linux.png
new file mode 100644
index 00000000000..f9892cc1b83
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-focus-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-light-colorblind-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-light-colorblind-linux.png
new file mode 100644
index 00000000000..52997585738
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-light-high-contrast-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-light-high-contrast-linux.png
new file mode 100644
index 00000000000..597f93f9f67
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-light-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-light-linux.png
new file mode 100644
index 00000000000..52997585738
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-light-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-light-tritanopia-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-light-tritanopia-linux.png
new file mode 100644
index 00000000000..52997585738
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-From-Action-Menu-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-dark-colorblind-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-dark-colorblind-linux.png
new file mode 100644
index 00000000000..d53fbabd6c8
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-dark-dimmed-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-dark-dimmed-linux.png
new file mode 100644
index 00000000000..5a04ee54ee3
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-dark-high-contrast-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..793addcce97
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-dark-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-dark-linux.png
new file mode 100644
index 00000000000..d53fbabd6c8
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-dark-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-dark-tritanopia-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..d53fbabd6c8
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-focus-dark-colorblind-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-focus-dark-colorblind-linux.png
new file mode 100644
index 00000000000..8f0669ea358
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-focus-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-focus-dark-dimmed-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-focus-dark-dimmed-linux.png
new file mode 100644
index 00000000000..3320c9c9773
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-focus-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-focus-dark-high-contrast-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-focus-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..c3afc8bc0be
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-focus-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-focus-dark-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-focus-dark-linux.png
new file mode 100644
index 00000000000..8f0669ea358
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-focus-dark-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-focus-dark-tritanopia-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-focus-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..8f0669ea358
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-focus-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-focus-light-colorblind-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-focus-light-colorblind-linux.png
new file mode 100644
index 00000000000..860b67f1f82
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-focus-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-focus-light-high-contrast-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-focus-light-high-contrast-linux.png
new file mode 100644
index 00000000000..b8756139c19
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-focus-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-focus-light-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-focus-light-linux.png
new file mode 100644
index 00000000000..860b67f1f82
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-focus-light-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-focus-light-tritanopia-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-focus-light-tritanopia-linux.png
new file mode 100644
index 00000000000..860b67f1f82
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-focus-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-light-colorblind-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-light-colorblind-linux.png
new file mode 100644
index 00000000000..ce56afc8cee
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-light-high-contrast-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-light-high-contrast-linux.png
new file mode 100644
index 00000000000..c56b1762812
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-light-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-light-linux.png
new file mode 100644
index 00000000000..ce56afc8cee
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-light-linux.png differ
diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-light-tritanopia-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-light-tritanopia-linux.png
new file mode 100644
index 00000000000..ce56afc8cee
Binary files /dev/null and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Shorthand-Hook-light-tritanopia-linux.png differ
diff --git a/e2e/components/ConfirmationDialog.test.ts b/e2e/components/ConfirmationDialog.test.ts
new file mode 100644
index 00000000000..d9d07b18c6d
--- /dev/null
+++ b/e2e/components/ConfirmationDialog.test.ts
@@ -0,0 +1,64 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+const stories = [
+  {
+    title: 'Default',
+    id: 'components-confirmationdialog--default',
+  },
+  {
+    title: 'Playground',
+    id: 'components-confirmationdialog--playground',
+  },
+  {
+    title: 'Shorthand Hook',
+    id: 'components-confirmationdialog-features--shorthand-hook',
+  },
+  {
+    title: 'Shorthand Hook From Action Menu',
+    id: 'components-confirmationdialog-features--shorthand-hook-from-action-menu',
+  },
+] as const
+
+test.describe('ConfirmationDialog', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('@vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+              args: {open: true},
+            })
+
+            // Default state
+            expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+              `ConfirmationDialog.${story.title}.${theme}.png`,
+            )
+
+            // Focus state
+            await page.keyboard.press('Tab')
+            expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+              `ConfirmationDialog.${story.title}.focus.${theme}.png`,
+            )
+          })
+
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+              args: {open: true},
+            })
+            await expect(page).toHaveNoViolations()
+          })
+        })
+      }
+    })
+  }
+})
diff --git a/packages/react/src/ConfirmationDialog/ConfirmationDialog.module.css b/packages/react/src/ConfirmationDialog/ConfirmationDialog.module.css
new file mode 100644
index 00000000000..12fac66ad61
--- /dev/null
+++ b/packages/react/src/ConfirmationDialog/ConfirmationDialog.module.css
@@ -0,0 +1,31 @@
+.ConfirmationHeader {
+  display: flex;
+  padding: var(--base-size-8);
+  flex-direction: row;
+
+  > h1 {
+    padding: var(--base-size-6) var(--base-size-8);
+
+    /* override default margin */
+    margin: 0;
+    font-size: var(--text-title-size-medium);
+    font-weight: var(--text-title-weight-medium);
+    flex-grow: 1;
+  }
+}
+
+.ConfirmationBody {
+  padding: 0 var(--base-size-16) var(--base-size-16) var(--base-size-16);
+  font-size: var(--text-body-size-medium);
+  flex-grow: 1;
+}
+
+.ConfirmationFooter {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
+  grid-gap: var(--base-size-8);
+  align-items: end;
+  justify-content: end;
+  padding: var(--base-size-4) var(--base-size-16) var(--base-size-16);
+}
diff --git a/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx b/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
index 51607879b34..5fab91cb57e 100644
--- a/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
+++ b/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
@@ -25,6 +25,7 @@ export const Default = () => {
   const [isOpen, setIsOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
   const onDialogClose = useCallback(() => setIsOpen(false), [])
+
   return (
     <>
       <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
@@ -44,3 +45,60 @@ export const Default = () => {
     </>
   )
 }
+
+interface PlaygroundProps {
+  open: boolean
+}
+
+export const Playground = ({open, ...args}: PlaygroundProps) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const onDialogClose = useCallback(() => setIsOpen(false), [])
+
+  return (
+    <>
+      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
+        Show dialog
+      </Button>
+      {(isOpen || open) && (
+        <ConfirmationDialog
+          title="Delete universe?"
+          onClose={onDialogClose}
+          confirmButtonContent="Delete it!"
+          confirmButtonType="danger"
+          {...args}
+        >
+          Deleting the universe could have disastrous effects, including but not limited to destroying all life on
+          Earth.
+        </ConfirmationDialog>
+      )}
+    </>
+  )
+}
+
+Playground.args = {
+  open: false,
+}
+
+Playground.argTypes = {
+  open: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  title: {
+    control: {
+      type: 'text',
+    },
+  },
+  cancelButtonContent: {
+    control: {
+      type: 'text',
+    },
+  },
+  confirmButtonContent: {
+    control: {
+      type: 'text',
+    },
+  },
+}
diff --git a/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx b/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx
index 0e45f3c683d..95fe993d620 100644
--- a/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx
+++ b/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx
@@ -10,6 +10,9 @@ import type {DialogProps, DialogHeaderProps, DialogButtonProps} from '../Dialog/
 import {Dialog} from '../Dialog/Dialog'
 import {useFocusZone} from '../hooks/useFocusZone'
 import BaseStyles from '../BaseStyles'
+import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
+import {useFeatureFlag} from '../FeatureFlags'
+import classes from './ConfirmationDialog.module.css'
 
 /**
  * Props to customize the ConfirmationDialog.
@@ -43,54 +46,85 @@ export interface ConfirmationDialogProps {
   confirmButtonType?: 'normal' | 'primary' | 'danger'
 }
 
-const StyledConfirmationHeader = styled.div`
-  padding: ${get('space.2')};
-  display: flex;
-  flex-direction: row;
-`
-const StyledTitle = styled(Box).attrs({as: 'h1'})`
-  font-size: ${get('fontSizes.3')};
-  font-weight: ${get('fontWeights.bold')};
-  padding: 6px ${get('space.2')};
-  flex-grow: 1;
-  margin: 0; /* override default margin */
-`
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+
+const StyledConfirmationHeader = toggleStyledComponent(
+  CSS_MODULES_FEATURE_FLAG,
+  'div',
+  styled.div`
+    padding: ${get('space.2')};
+    display: flex;
+    flex-direction: row;
+  `,
+)
+
+const StyledTitle = toggleStyledComponent(
+  CSS_MODULES_FEATURE_FLAG,
+  'h1',
+  styled(Box).attrs({as: 'h1'})`
+    font-size: ${get('fontSizes.3')};
+    font-weight: ${get('fontWeights.bold')};
+    padding: 6px ${get('space.2')};
+    flex-grow: 1;
+    margin: 0; /* override default margin */
+  `,
+)
+
 const ConfirmationHeader: React.FC<React.PropsWithChildren<DialogHeaderProps>> = ({title, onClose, dialogLabelId}) => {
   const onCloseClick = useCallback(() => {
     onClose('close-button')
   }, [onClose])
+
+  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
   return (
-    <StyledConfirmationHeader>
+    <StyledConfirmationHeader className={enabled && classes.ConfirmationHeader}>
       <StyledTitle id={dialogLabelId}>{title}</StyledTitle>
       <Dialog.CloseButton onClose={onCloseClick} />
     </StyledConfirmationHeader>
   )
 }
-const StyledConfirmationBody = styled(Box)`
-  font-size: ${get('fontSizes.1')};
-  padding: 0 ${get('space.3')} ${get('space.3')} ${get('space.3')};
-  flex-grow: 1;
-`
+const StyledConfirmationBody = toggleStyledComponent(
+  CSS_MODULES_FEATURE_FLAG,
+  'div',
+  styled(Box)`
+    font-size: ${get('fontSizes.1')};
+    padding: 0 ${get('space.3')} ${get('space.3')} ${get('space.3')};
+    flex-grow: 1;
+  `,
+)
+
 const ConfirmationBody: React.FC<React.PropsWithChildren<DialogProps>> = ({children}) => {
-  return <StyledConfirmationBody>{children}</StyledConfirmationBody>
+  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+  return <StyledConfirmationBody className={enabled && classes.ConfirmationBody}>{children}</StyledConfirmationBody>
 }
-const StyledConfirmationFooter = styled(Box)`
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: max-content;
-  grid-gap: ${get('space.2')};
-  align-items: end;
-  justify-content: end;
-  padding: ${get('space.1')} ${get('space.3')} ${get('space.3')};
-`
+const StyledConfirmationFooter = toggleStyledComponent(
+  CSS_MODULES_FEATURE_FLAG,
+  'div',
+  styled(Box)`
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: max-content;
+    grid-gap: ${get('space.2')};
+    align-items: end;
+    justify-content: end;
+    padding: ${get('space.1')} ${get('space.3')} ${get('space.3')};
+  `,
+)
+
 const ConfirmationFooter: React.FC<React.PropsWithChildren<DialogProps>> = ({footerButtons}) => {
   const {containerRef: footerRef} = useFocusZone({
     bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.Tab,
     focusInStrategy: 'closest',
   })
+
+  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+
   // Must have exactly 2 buttons!
   return (
-    <StyledConfirmationFooter ref={footerRef as React.RefObject<HTMLDivElement>}>
+    <StyledConfirmationFooter
+      ref={footerRef as React.RefObject<HTMLDivElement>}
+      className={enabled && classes.ConfirmationFooter}
+    >
       <Dialog.Buttons buttons={footerButtons ?? []} />
     </StyledConfirmationFooter>
   )