diff --git a/src/__tests__/__snapshots__/Button.tsx.snap b/src/__tests__/__snapshots__/Button.tsx.snap
index 6571b779584..8d6a4610d13 100644
--- a/src/__tests__/__snapshots__/Button.tsx.snap
+++ b/src/__tests__/__snapshots__/Button.tsx.snap
@@ -201,17 +201,20 @@ exports[`ButtonDanger renders consistently 1`] = `
 }
 
 .c0:focus {
-  border-color: transparent;
+  border-color: rgba(27,31,35,0.15);
+  box-shadow: 0 0 0 3px rgba(203,36,49,0.4);
 }
 
 .c0:active {
   color: #ffffff;
   background-color: #d42d3d;
   box-shadow: inset 0 1px 0 rgba(134,24,29,0.2);
+  border-color: rgba(27,31,35,0.15);
 }
 
 .c0:disabled {
   color: rgba(215,58,73,0.5);
+  background-color: #fafbfc;
 }
 
 <button
@@ -273,17 +276,20 @@ exports[`ButtonDanger renders correct disabled styles 1`] = `
 }
 
 .c0:focus {
-  border-color: transparent;
+  border-color: rgba(27,31,35,0.15);
+  box-shadow: 0 0 0 3px rgba(203,36,49,0.4);
 }
 
 .c0:active {
   color: #ffffff;
   background-color: #d42d3d;
   box-shadow: inset 0 1px 0 rgba(134,24,29,0.2);
+  border-color: rgba(27,31,35,0.15);
 }
 
 .c0:disabled {
   color: rgba(215,58,73,0.5);
+  background-color: #fafbfc;
 }
 
 <button
@@ -399,17 +405,21 @@ exports[`ButtonInvisible renders consistently 1`] = `
 }
 
 .c0:focus {
-  border-color: transparent;
+  border-color: rgba(27,31,35,0.15);
+  box-shadow: 0 0 0 3px rgba(0,92,197,0.4);
 }
 
 .c0:active {
   color: #ffffff;
   background-color: #035fc7;
   box-shadow: inset 0 1px 0 rgba(5,38,76,0.2);
+  border-color: rgba(27,31,35,0.15);
 }
 
 .c0:disabled {
   color: rgba(3,102,214,0.5);
+  background-color: #fafbfc;
+  border-color: rgba(27,31,35,0.15);
 }
 
 <button
@@ -532,17 +542,21 @@ exports[`ButtonOutline renders consistently 1`] = `
 }
 
 .c0:focus {
-  border-color: transparent;
+  border-color: rgba(27,31,35,0.15);
+  box-shadow: 0 0 0 3px rgba(0,92,197,0.4);
 }
 
 .c0:active {
   color: #ffffff;
   background-color: #035fc7;
   box-shadow: inset 0 1px 0 rgba(5,38,76,0.2);
+  border-color: rgba(27,31,35,0.15);
 }
 
 .c0:disabled {
   color: rgba(3,102,214,0.5);
+  background-color: #fafbfc;
+  border-color: rgba(27,31,35,0.15);
 }
 
 <button
@@ -604,17 +618,21 @@ exports[`ButtonOutline renders correct disabled styles 1`] = `
 }
 
 .c0:focus {
-  border-color: transparent;
+  border-color: rgba(27,31,35,0.15);
+  box-shadow: 0 0 0 3px rgba(0,92,197,0.4);
 }
 
 .c0:active {
   color: #ffffff;
   background-color: #035fc7;
   box-shadow: inset 0 1px 0 rgba(5,38,76,0.2);
+  border-color: rgba(27,31,35,0.15);
 }
 
 .c0:disabled {
   color: rgba(3,102,214,0.5);
+  background-color: #fafbfc;
+  border-color: rgba(27,31,35,0.15);
 }
 
 <button
@@ -675,7 +693,8 @@ exports[`ButtonPrimary renders consistently 1`] = `
 }
 
 .c0:focus {
-  border-color: transparent;
+  border-color: rgba(27,31,35,0.15);
+  box-shadow: 0 0 0 3px rgba(46,164,79,0.4);
 }
 
 .c0:active {
@@ -685,6 +704,8 @@ exports[`ButtonPrimary renders consistently 1`] = `
 
 .c0:disabled {
   color: rgba(255,255,255,0.8);
+  background-color: #94d3a2;
+  border-color: rgba(27,31,35,0.1);
 }
 
 <button
@@ -744,7 +765,8 @@ exports[`ButtonPrimary renders correct disabled styles 1`] = `
 }
 
 .c0:focus {
-  border-color: transparent;
+  border-color: rgba(27,31,35,0.15);
+  box-shadow: 0 0 0 3px rgba(46,164,79,0.4);
 }
 
 .c0:active {
@@ -754,6 +776,8 @@ exports[`ButtonPrimary renders correct disabled styles 1`] = `
 
 .c0:disabled {
   color: rgba(255,255,255,0.8);
+  background-color: #94d3a2;
+  border-color: rgba(27,31,35,0.1);
 }
 
 <button