diff --git a/libs/components/src/button/button.component.ts b/libs/components/src/button/button.component.ts
index 0e50ccbe87a..0e5dca387e0 100644
--- a/libs/components/src/button/button.component.ts
+++ b/libs/components/src/button/button.component.ts
@@ -18,6 +18,10 @@ import { SpinnerComponent } from "../spinner";
 import { ariaDisableElement } from "../utils";
 
 const focusRing = [
+  "focus:tw-ring-2",
+  "focus:tw-ring-offset-2",
+  "focus:tw-ring-primary-600",
+  "focus:tw-z-10",
   "focus-visible:tw-ring-2",
   "focus-visible:tw-ring-offset-2",
   "focus-visible:tw-ring-primary-600",
diff --git a/libs/components/src/icon-button/icon-button.component.ts b/libs/components/src/icon-button/icon-button.component.ts
index ca0e3fb1de5..0c2915546c4 100644
--- a/libs/components/src/icon-button/icon-button.component.ts
+++ b/libs/components/src/icon-button/icon-button.component.ts
@@ -38,6 +38,7 @@ const focusRing = [
   "before:tw-ring-2",
   "before:tw-ring-transparent",
   "focus-visible:tw-z-10",
+  "focus:tw-z-10",
 ];
 
 const styles: Record<IconButtonType, string[]> = {
@@ -48,7 +49,12 @@ const styles: Record<IconButtonType, string[]> = {
     "focus-visible:before:tw-ring-text-contrast",
     ...focusRing,
   ],
-  main: ["!tw-text-main", "focus-visible:before:tw-ring-primary-600", ...focusRing],
+  main: [
+    "!tw-text-main",
+    "focus-visible:before:tw-ring-primary-600",
+    "focus:before:tw-ring-primary-600",
+    ...focusRing,
+  ],
   muted: [
     "!tw-text-muted",
     "tw-border-transparent",