diff --git a/code/core/src/components/components/Button/Button.stories.tsx b/code/core/src/components/components/Button/Button.stories.tsx
index 422b2c799155..24c9bb22094b 100644
--- a/code/core/src/components/components/Button/Button.stories.tsx
+++ b/code/core/src/components/components/Button/Button.stories.tsx
@@ -100,6 +100,17 @@ export const PseudoStates = meta.story({
           Hover
         </Button>
       </Row>
+      <Row id="active">
+        <Button ariaLabel={false} variant="solid">
+          active
+        </Button>
+        <Button ariaLabel={false} variant="outline">
+          active
+        </Button>
+        <Button ariaLabel={false} variant="ghost">
+          active
+        </Button>
+      </Row>
       <Row id="focus">
         <Button ariaLabel={false} variant="solid">
           Focus
@@ -127,6 +138,7 @@ export const PseudoStates = meta.story({
   parameters: {
     pseudo: {
       hover: '#hover button',
+      active: '#active button',
       focus: '#focus button',
       focusVisible: '#focus-visible button',
     },
diff --git a/code/core/src/components/components/Button/Button.tsx b/code/core/src/components/components/Button/Button.tsx
index 6c3ef0f1f46c..e575dd79c889 100644
--- a/code/core/src/components/components/Button/Button.tsx
+++ b/code/core/src/components/components/Button/Button.tsx
@@ -278,9 +278,9 @@ const StyledButton = styled('button', {
     })(),
   },
 
-  '&:focus': {
-    boxShadow: `${rgba(theme.color.secondary, 1)} 0 0 0 1px inset`,
-    outline: 'none',
+  '&:focus-visible': {
+    outline: `2px solid ${rgba(theme.color.secondary, 1)}`,
+    outlineOffset: 2,
   },
 
   '> svg': {