diff --git a/scss/core/_variables.scss b/scss/core/_variables.scss
index 3fe1f20d29..c53894661e 100644
--- a/scss/core/_variables.scss
+++ b/scss/core/_variables.scss
@@ -282,7 +282,7 @@ $element-color-levels: map-merge(
     "border": 200,
     "icon": 300,
     "active-border": 300,
-    "focus": 300,
+    "focus": 500,
     "graphic": 300,
     "default": 500,
     "light-text": 500,
diff --git a/src/Button/README.md b/src/Button/README.md
index 93e235e375..88585c78dc 100644
--- a/src/Button/README.md
+++ b/src/Button/README.md
@@ -22,11 +22,11 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi
 
   return (
     <Stack gap={2} direction={ isExtraSmall ? "vertical" : "horizontal" }>
-      <Button variant="brand" className="mb-2 mb-sm-0">Brand</Button>
-      <Button variant="outline-brand" className="mb-2 mb-sm-0">Outline Brand</Button>
-      <Button variant="primary" className="mb-2 mb-sm-0">Primary</Button>
-      <Button variant="outline-primary" className="mb-2 mb-sm-0">Outline Primary</Button>
-      <Button variant="tertiary" className="mb-2 mb-sm-0">Tertiary</Button>
+      <Button variant="brand">Brand</Button>
+      <Button variant="outline-brand">Outline Brand</Button>
+      <Button variant="primary">Primary</Button>
+      <Button variant="outline-primary">Outline Primary</Button>
+      <Button variant="tertiary">Tertiary</Button>
     </Stack>
 )}
 ```
@@ -43,11 +43,11 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi
       gap={2}
       direction={ isExtraSmall ? "vertical" : "horizontal" }
     >
-      <Button variant="inverse-brand" className="mb-2 mb-sm-0">Brand</Button>
-      <Button variant="inverse-outline-brand" className="mb-2 mb-sm-0">Outline Brand</Button>
-      <Button variant="inverse-primary" className="mb-2 mb-sm-0">Primary</Button>
-      <Button variant="inverse-outline-primary" className="mb-2 mb-sm-0">Outline Primary</Button>
-      <Button variant="inverse-tertiary" className="mb-2 mb-sm-0">Tertiary</Button>
+      <Button variant="inverse-brand">Brand</Button>
+      <Button variant="inverse-outline-brand">Outline Brand</Button>
+      <Button variant="inverse-primary">Primary</Button>
+      <Button variant="inverse-outline-primary">Outline Primary</Button>
+      <Button variant="inverse-tertiary">Tertiary</Button>
     </Stack>
 )}
 ```
@@ -65,20 +65,20 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi
         gap={2}
         direction={ isExtraSmall ? "vertical" : "horizontal" }
       >
-        <Button variant="success" className="mb-2 mb-sm-0">Success</Button>
-        <Button variant="danger" className="mb-2 mb-sm-0">Danger</Button>
-        <Button variant="outline-success" className="mb-2 mb-sm-0">Success</Button>
-        <Button variant="outline-danger" className="mb-2 mb-sm-0">Danger</Button>
+        <Button variant="success">Success</Button>
+        <Button variant="danger">Danger</Button>
+        <Button variant="outline-success">Success</Button>
+        <Button variant="outline-danger">Danger</Button>
       </Stack>
       <Stack
         gap={2}
         direction={ isExtraSmall ? "vertical" : "horizontal" }
       >
-        <Button variant="link" className="mb-2 mb-sm-0">Link</Button>
-        <Button variant="light" className="mb-2 mb-sm-0">Light</Button>
-        <Button variant="dark" className="mb-2 mb-sm-0">Dark</Button>
-        <Button variant="outline-light" className="mb-2 mb-sm-0">Light</Button>
-        <Button variant="outline-dark" className="mb-2 mb-sm-0">Dark</Button>
+        <Button variant="link">Link</Button>
+        <Button variant="light">Light</Button>
+        <Button variant="dark">Dark</Button>
+        <Button variant="outline-light">Light</Button>
+        <Button variant="outline-dark">Dark</Button>
       </Stack>
     </>
 )}
@@ -92,34 +92,41 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi
 
   return (
     <>
-        <Stack
-          className="mb-2"
-          gap={2}
-          direction={ isExtraSmall ? "vertical" : "horizontal" }
-        >
-          <Button variant="primary" size="lg" className="mb-2 mb-sm-0">
-            Large button
-          </Button>
-          <Button variant="outline-primary" size="lg" className="mb-2 mb-sm-0">
-            Large button
-          </Button>
-        </Stack>
-        <Stack
-          className="mb-2"
-          gap={2}
-          direction={ isExtraSmall ? "vertical" : "horizontal" }
-        >
-          <Button variant="primary" size="sm" className="mb-2 mb-sm-0">
-            Small button
-          </Button>
-          <Button variant="outline-primary" size="sm" className="mb-2 mb-sm-0">
-            Small button
-          </Button>
-        </Stack>
-        <Button variant="link" size="inline" className="mb-2 mb-sm-0">Inline button</Button>
-        <Button variant="link" size="inline" className="mb-2 mb-sm-0">Inline button</Button>
+      <Stack
+        className="mb-2"
+        gap={2}
+        direction={ isExtraSmall ? "vertical" : "horizontal" }
+      >
+        <Button variant="primary" size="lg">
+          Large button
+        </Button>
+        <Button variant="outline-primary" size="lg">
+          Large button
+        </Button>
+      </Stack>
+      <Stack
+        className="mb-2"
+        gap={2}
+        direction={ isExtraSmall ? "vertical" : "horizontal" }
+      >
+        <Button variant="primary" size="sm">
+          Small button
+        </Button>
+        <Button variant="outline-primary" size="sm">
+          Small button
+        </Button>
+      </Stack>
+      <Stack
+        className="mb-2"
+        gap={2}
+        direction={ isExtraSmall ? "vertical" : "horizontal" }
+      >
+        <Button variant="link" size="inline">Inline button</Button>
+        <Button variant="link" size="inline">Inline button</Button>
+      </Stack>
     </>
-)}
+  )
+}
 ```
 
 ### When to use the inline size
@@ -127,13 +134,11 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi
 Use inline size buttons for when a button sits with a line of text.
 
 ```jsx live
-<>
-  <p>
-    <span className="mr-1">2 items selected.</span>
-    <Button variant="link" size="inline" className="mr-1">Select all</Button>
-    <Button variant="link" size="inline">Clear</Button>
-  </p>
-</>
+<p>
+  <span className="mr-1">2 items selected.</span>
+  <Button variant="link" size="inline" className="mr-1">Select all</Button>
+  <Button variant="link" size="inline">Clear</Button>
+</p>
 ```
 
 ## Block Buttons
@@ -152,21 +157,41 @@ Use inline size buttons for when a button sits with a line of text.
 ### Disabled
 
 ```jsx live
-<>
-  <Button variant="primary" disabled>Primary disabled</Button>
-  <Button variant="secondary" disabled>Secondary disabled</Button>
-  <Button as="a" href="https://edx.org" disabled>Link disabled</Button>
-</>
+() => {
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
+
+  return (
+    <Stack
+      className="mb-2"
+      gap={2}
+      direction={ isExtraSmall ? "vertical" : "horizontal" }
+    >
+      <Button variant="primary" disabled>Primary disabled</Button>
+      <Button variant="secondary" disabled>Secondary disabled</Button>
+      <Button as="a" href="https://edx.org" disabled>Link disabled</Button>
+    </Stack>
+    )
+}
 ```
 
 ### With empty href
 For link to be `disabled`, it must have href defined with some value.
 
 ```jsx live
-<>
-  <Button as='a' disabled>No href</Button>
-  <Button as='a' href='' disabled>Empty string href</Button>
-</>
+() => {
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
+
+  return (
+    <Stack
+      className="mb-2"
+      gap={2}
+      direction={ isExtraSmall ? "vertical" : "horizontal" }
+    >
+      <Button as="a" disabled>No href</Button>
+      <Button as="a" href="" disabled>Empty string href</Button>
+    </Stack>
+  )
+}
 ```
 
 ### With Icons before or after
@@ -181,23 +206,24 @@ For link to be `disabled`, it must have href defined with some value.
       gap={2}
       direction={ isExtraSmall ? "vertical" : "horizontal" }
     >
-      <Button variant="brand" iconBefore={ArrowBack} className="mb-2 mb-sm-0">
+      <Button variant="brand" iconBefore={ArrowBack}>
         Brand
       </Button>
-      <Button variant="outline-brand" iconAfter={ArrowDropDown} className="mb-2 mb-sm-0">
+      <Button variant="outline-brand" iconAfter={ArrowDropDown}>
         Outline Brand
       </Button>
-      <Button variant="primary" iconBefore={Remove} iconAfter={Add} className="mb-2 mb-sm-0">
+      <Button variant="primary" iconBefore={Remove} iconAfter={Add}>
         Primary
       </Button>
-      <Button variant="outline-primary" iconBefore={Highlight} className="mb-2 mb-sm-0">
+      <Button variant="outline-primary" iconBefore={Highlight}>
         Outline Primary
       </Button>
-      <Button variant="tertiary" iconAfter={Add} className="mb-2 mb-sm-0">
+      <Button variant="tertiary" iconAfter={Add}>
         Tertiary
       </Button>
     </Stack>
-)}
+  )
+}
 ```
 
 ## Stateful buttons
@@ -219,33 +245,63 @@ user-friendly experience.
 ### (Deprecated) color variants
 
 ```jsx live
-<div>
-  <Button.Deprecated className="btn-primary">Primary</Button.Deprecated>
-  <Button.Deprecated className="btn-success">Success</Button.Deprecated>
-  <Button.Deprecated className="btn-danger">Danger</Button.Deprecated>
-  <Button.Deprecated className="btn-light">Light</Button.Deprecated>
-  <Button.Deprecated className="btn-dark">Dark</Button.Deprecated>
-</div>
+() => {
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.large.maxWidth });
+
+  return (
+    <Stack
+      className="mb-2"
+      gap={2}
+      direction={ isExtraSmall ? "vertical" : "horizontal" }
+    >
+      <Button.Deprecated className="btn-primary">Primary</Button.Deprecated>
+      <Button.Deprecated className="btn-success">Success</Button.Deprecated>
+      <Button.Deprecated className="btn-danger">Danger</Button.Deprecated>
+      <Button.Deprecated className="btn-light">Light</Button.Deprecated>
+      <Button.Deprecated className="btn-dark">Dark</Button.Deprecated>
+    </Stack>
+  )
+}
 ```
 
 ### (Deprecated) outline variants
 
 ```jsx live
-<div>
-  <Button.Deprecated className="btn-outline-primary">Primary</Button.Deprecated>
-  <Button.Deprecated className="btn-outline-success">Success</Button.Deprecated>
-  <Button.Deprecated className="btn-outline-danger">Danger</Button.Deprecated>
-</div>
+() => {
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
+
+  return (
+    <Stack
+      className="mb-2"
+      gap={2}
+      direction={ isExtraSmall ? "vertical" : "horizontal" }
+    >
+      <Button.Deprecated className="btn-outline-primary">Primary</Button.Deprecated>
+      <Button.Deprecated className="btn-outline-success">Success</Button.Deprecated>
+      <Button.Deprecated className="btn-outline-danger">Danger</Button.Deprecated>
+    </Stack>
+  )
+}
 ```
 
 ### (Deprecated) inverse variants
 
 ```jsx live
-<div className="bg-gray-700 p-3">
-  <Button.Deprecated className="btn-inverse-primary">Primary</Button.Deprecated>
-  <Button.Deprecated className="btn-inverse-success">Success</Button.Deprecated>
-  <Button.Deprecated className="btn-inverse-danger">Danger</Button.Deprecated>
-</div>
+() => {
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
+
+  return (
+    <Stack
+      className="mb-2 p-3 bg-gray-700"
+      gap={2}
+      direction={ isExtraSmall ? "vertical" : "horizontal" }
+    >
+      <Button.Deprecated className="btn-inverse-primary">Primary</Button.Deprecated>
+      <Button.Deprecated className="btn-inverse-success">Success</Button.Deprecated>
+      <Button.Deprecated className="btn-inverse-danger">Danger</Button.Deprecated>
+    </Stack>
+  )
+}
 ```
 
 ### (Deprecated) link variant
diff --git a/src/Button/_variables.scss b/src/Button/_variables.scss
index 5d92ed8271..5022877db9 100644
--- a/src/Button/_variables.scss
+++ b/src/Button/_variables.scss
@@ -19,7 +19,7 @@ $btn-border-width:            $input-btn-border-width !default;
 $btn-font-weight:             $font-weight-normal !default;
 $btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
 $btn-focus-width:             2px !default;
-$btn-focus-gap:               1px !default;
+$btn-focus-gap:               $btn-focus-width !default;
 $btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
 $btn-disabled-opacity:        .65 !default;
 $btn-active-box-shadow:       none;
@@ -48,3 +48,5 @@ $btn-focus-border-gap: $btn-focus-width + $btn-focus-gap !default;
 $btn-focus-distance-to-border: $btn-focus-border-gap + $btn-border-width !default;
 
 $btn-focus-border-radius: calc(#{$btn-border-radius} + #{$btn-focus-border-gap}) !default;
+$btn-focus-border-radius-lg: $btn-focus-border-radius !default;
+$btn-focus-border-radius-sm: $btn-border-radius !default;
diff --git a/src/Button/index.scss b/src/Button/index.scss
index 52c3eae069..9580fcd588 100644
--- a/src/Button/index.scss
+++ b/src/Button/index.scss
@@ -150,11 +150,11 @@
     }
 
     &.btn-lg::before {
-      border-radius: $btn-focus-border-radius;
+      border-radius: $btn-focus-border-radius-lg;
     }
 
     &.btn-sm::before {
-      border-radius: $btn-focus-border-radius;
+      border-radius: $btn-focus-border-radius-sm;
     }
 
     &:active,