diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
index b626426086..a8534c9a83 100644
--- a/src/__snapshots__/storyshots.spec.js.snap
+++ b/src/__snapshots__/storyshots.spec.js.snap
@@ -1255,7 +1255,7 @@ exports[`Storyshots Components/Button/IconButton Base 1`] = `
 </button>
 `;
 
-exports[`Storyshots Components/Button/LoadingButton Error Animation 1`] = `
+exports[`Storyshots Components/Button/LoadingButton Base 1`] = `
 @keyframes animation-0 {
   0% {
     -webkit-transform: rotate3d(0,0,1,0deg);
@@ -1270,7 +1270,7 @@ exports[`Storyshots Components/Button/LoadingButton Error Animation 1`] = `
   }
 }
 
-.circuit-9 {
+.circuit-8 {
   background-color: #FAFBFC;
   border-color: #D8DDE1;
   border-radius: 4px;
@@ -1292,38 +1292,40 @@ exports[`Storyshots Components/Button/LoadingButton Error Animation 1`] = `
   border-color: #1760CE;
   color: #FFFFFF;
   padding: calc(8px - 0px) calc(24px - 0px);
+  position: relative;
+  overflow: hidden;
 }
 
-.circuit-9:active {
+.circuit-8:active {
   background-color: #D8DDE1;
   border-color: #9DA7B1;
   box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3);
 }
 
-.circuit-9:focus {
+.circuit-8:focus {
   border-color: #9DA7B1;
   border-width: 2px;
   outline: 0;
   padding: calc(8px - 1px) calc(24px - 1px);
 }
 
-.circuit-9:hover {
+.circuit-8:hover {
   background-color: #D8DDE1;
 }
 
-.circuit-9:hover,
-.circuit-9:active {
+.circuit-8:hover,
+.circuit-8:active {
   border-color: #9DA7B1;
   border-width: 1px;
   padding: calc(8px - 0px) calc(24px - 0px);
 }
 
-.circuit-9[href] {
+.circuit-8[href] {
   display: inline-block;
 }
 
-.circuit-9:disabled,
-.circuit-9[disabled] {
+.circuit-8:disabled,
+.circuit-8[disabled] {
   opacity: 0.4;
   pointer-events: none;
   -webkit-user-selectable: none;
@@ -1332,28 +1334,24 @@ exports[`Storyshots Components/Button/LoadingButton Error Animation 1`] = `
   user-selectable: none;
 }
 
-.circuit-9:active {
+.circuit-8:active {
   background-color: #1760CE;
   border-color: #003C8B;
 }
 
-.circuit-9:focus {
+.circuit-8:focus {
   border-color: #1760CE;
 }
 
-.circuit-9:hover {
+.circuit-8:hover {
   background-color: #1760CE;
 }
 
-.circuit-9:hover,
-.circuit-9:active {
+.circuit-8:hover,
+.circuit-8:active {
   border-color: #003C8B;
 }
 
-.circuit-7 {
-  position: relative;
-}
-
 .circuit-3 {
   opacity: 0;
   max-width: -webkit-fit-content;
@@ -1390,6 +1388,7 @@ exports[`Storyshots Components/Button/LoadingButton Error Animation 1`] = `
 }
 
 .circuit-5 {
+  display: inline-block;
   opacity: 1;
   -webkit-transform: translate(0,0);
   -ms-transform: translate(0,0);
@@ -1400,34 +1399,30 @@ exports[`Storyshots Components/Button/LoadingButton Error Animation 1`] = `
 }
 
 <button
-  class="circuit-9 circuit-10"
+  class="circuit-7 circuit-8 circuit-9"
 >
   <div
-    class="circuit-7 circuit-8"
+    aria-busy="true"
+    aria-live="assertive"
+    class="circuit-2 circuit-3 circuit-4"
+    role="alert"
   >
     <div
-      aria-busy="true"
-      aria-live="assertive"
-      class="circuit-2 circuit-3 circuit-4"
-      role="alert"
-    >
-      <div
-        class="circuit-0 circuit-1"
-        dark="0"
-      >
-        spinner.svg
-      </div>
-    </div>
-    <div
-      class="circuit-5 circuit-6"
+      class="circuit-0 circuit-1"
+      dark="0"
     >
-      Click me
+      spinner.svg
     </div>
   </div>
+  <span
+    class="circuit-5 circuit-6"
+  >
+    Things take time
+  </span>
 </button>
 `;
 
-exports[`Storyshots Components/Button/LoadingButton No Exit Animation 1`] = `
+exports[`Storyshots Components/Button/LoadingButton Error 1`] = `
 @keyframes animation-0 {
   0% {
     -webkit-transform: rotate3d(0,0,1,0deg);
@@ -1442,7 +1437,7 @@ exports[`Storyshots Components/Button/LoadingButton No Exit Animation 1`] = `
   }
 }
 
-.circuit-9 {
+.circuit-8 {
   background-color: #FAFBFC;
   border-color: #D8DDE1;
   border-radius: 4px;
@@ -1464,38 +1459,40 @@ exports[`Storyshots Components/Button/LoadingButton No Exit Animation 1`] = `
   border-color: #1760CE;
   color: #FFFFFF;
   padding: calc(8px - 0px) calc(24px - 0px);
+  position: relative;
+  overflow: hidden;
 }
 
-.circuit-9:active {
+.circuit-8:active {
   background-color: #D8DDE1;
   border-color: #9DA7B1;
   box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3);
 }
 
-.circuit-9:focus {
+.circuit-8:focus {
   border-color: #9DA7B1;
   border-width: 2px;
   outline: 0;
   padding: calc(8px - 1px) calc(24px - 1px);
 }
 
-.circuit-9:hover {
+.circuit-8:hover {
   background-color: #D8DDE1;
 }
 
-.circuit-9:hover,
-.circuit-9:active {
+.circuit-8:hover,
+.circuit-8:active {
   border-color: #9DA7B1;
   border-width: 1px;
   padding: calc(8px - 0px) calc(24px - 0px);
 }
 
-.circuit-9[href] {
+.circuit-8[href] {
   display: inline-block;
 }
 
-.circuit-9:disabled,
-.circuit-9[disabled] {
+.circuit-8:disabled,
+.circuit-8[disabled] {
   opacity: 0.4;
   pointer-events: none;
   -webkit-user-selectable: none;
@@ -1504,28 +1501,24 @@ exports[`Storyshots Components/Button/LoadingButton No Exit Animation 1`] = `
   user-selectable: none;
 }
 
-.circuit-9:active {
+.circuit-8:active {
   background-color: #1760CE;
   border-color: #003C8B;
 }
 
-.circuit-9:focus {
+.circuit-8:focus {
   border-color: #1760CE;
 }
 
-.circuit-9:hover {
+.circuit-8:hover {
   background-color: #1760CE;
 }
 
-.circuit-9:hover,
-.circuit-9:active {
+.circuit-8:hover,
+.circuit-8:active {
   border-color: #003C8B;
 }
 
-.circuit-7 {
-  position: relative;
-}
-
 .circuit-3 {
   opacity: 0;
   max-width: -webkit-fit-content;
@@ -1562,6 +1555,7 @@ exports[`Storyshots Components/Button/LoadingButton No Exit Animation 1`] = `
 }
 
 .circuit-5 {
+  display: inline-block;
   opacity: 1;
   -webkit-transform: translate(0,0);
   -ms-transform: translate(0,0);
@@ -1572,34 +1566,30 @@ exports[`Storyshots Components/Button/LoadingButton No Exit Animation 1`] = `
 }
 
 <button
-  class="circuit-9 circuit-10"
+  class="circuit-7 circuit-8 circuit-9"
 >
   <div
-    class="circuit-7 circuit-8"
+    aria-busy="true"
+    aria-live="assertive"
+    class="circuit-2 circuit-3 circuit-4"
+    role="alert"
   >
     <div
-      aria-busy="true"
-      aria-live="assertive"
-      class="circuit-2 circuit-3 circuit-4"
-      role="alert"
-    >
-      <div
-        class="circuit-0 circuit-1"
-        dark="0"
-      >
-        spinner.svg
-      </div>
-    </div>
-    <div
-      class="circuit-5 circuit-6"
+      class="circuit-0 circuit-1"
+      dark="0"
     >
-      Click me
+      spinner.svg
     </div>
   </div>
+  <span
+    class="circuit-5 circuit-6"
+  >
+    I will fail.
+  </span>
 </button>
 `;
 
-exports[`Storyshots Components/Button/LoadingButton Success Animation 1`] = `
+exports[`Storyshots Components/Button/LoadingButton Success 1`] = `
 @keyframes animation-0 {
   0% {
     -webkit-transform: rotate3d(0,0,1,0deg);
@@ -1614,7 +1604,7 @@ exports[`Storyshots Components/Button/LoadingButton Success Animation 1`] = `
   }
 }
 
-.circuit-9 {
+.circuit-8 {
   background-color: #FAFBFC;
   border-color: #D8DDE1;
   border-radius: 4px;
@@ -1636,38 +1626,40 @@ exports[`Storyshots Components/Button/LoadingButton Success Animation 1`] = `
   border-color: #1760CE;
   color: #FFFFFF;
   padding: calc(8px - 0px) calc(24px - 0px);
+  position: relative;
+  overflow: hidden;
 }
 
-.circuit-9:active {
+.circuit-8:active {
   background-color: #D8DDE1;
   border-color: #9DA7B1;
   box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3);
 }
 
-.circuit-9:focus {
+.circuit-8:focus {
   border-color: #9DA7B1;
   border-width: 2px;
   outline: 0;
   padding: calc(8px - 1px) calc(24px - 1px);
 }
 
-.circuit-9:hover {
+.circuit-8:hover {
   background-color: #D8DDE1;
 }
 
-.circuit-9:hover,
-.circuit-9:active {
+.circuit-8:hover,
+.circuit-8:active {
   border-color: #9DA7B1;
   border-width: 1px;
   padding: calc(8px - 0px) calc(24px - 0px);
 }
 
-.circuit-9[href] {
+.circuit-8[href] {
   display: inline-block;
 }
 
-.circuit-9:disabled,
-.circuit-9[disabled] {
+.circuit-8:disabled,
+.circuit-8[disabled] {
   opacity: 0.4;
   pointer-events: none;
   -webkit-user-selectable: none;
@@ -1676,28 +1668,24 @@ exports[`Storyshots Components/Button/LoadingButton Success Animation 1`] = `
   user-selectable: none;
 }
 
-.circuit-9:active {
+.circuit-8:active {
   background-color: #1760CE;
   border-color: #003C8B;
 }
 
-.circuit-9:focus {
+.circuit-8:focus {
   border-color: #1760CE;
 }
 
-.circuit-9:hover {
+.circuit-8:hover {
   background-color: #1760CE;
 }
 
-.circuit-9:hover,
-.circuit-9:active {
+.circuit-8:hover,
+.circuit-8:active {
   border-color: #003C8B;
 }
 
-.circuit-7 {
-  position: relative;
-}
-
 .circuit-3 {
   opacity: 0;
   max-width: -webkit-fit-content;
@@ -1734,6 +1722,7 @@ exports[`Storyshots Components/Button/LoadingButton Success Animation 1`] = `
 }
 
 .circuit-5 {
+  display: inline-block;
   opacity: 1;
   -webkit-transform: translate(0,0);
   -ms-transform: translate(0,0);
@@ -1744,30 +1733,26 @@ exports[`Storyshots Components/Button/LoadingButton Success Animation 1`] = `
 }
 
 <button
-  class="circuit-9 circuit-10"
+  class="circuit-7 circuit-8 circuit-9"
 >
   <div
-    class="circuit-7 circuit-8"
+    aria-busy="true"
+    aria-live="assertive"
+    class="circuit-2 circuit-3 circuit-4"
+    role="alert"
   >
     <div
-      aria-busy="true"
-      aria-live="assertive"
-      class="circuit-2 circuit-3 circuit-4"
-      role="alert"
-    >
-      <div
-        class="circuit-0 circuit-1"
-        dark="0"
-      >
-        spinner.svg
-      </div>
-    </div>
-    <div
-      class="circuit-5 circuit-6"
+      class="circuit-0 circuit-1"
+      dark="0"
     >
-      Click me
+      spinner.svg
     </div>
   </div>
+  <span
+    class="circuit-5 circuit-6"
+  >
+    I am a success!
+  </span>
 </button>
 `;
 
diff --git a/src/components/LoadingButton/LoadingButton.story.js b/src/components/LoadingButton/LoadingButton.story.js
index eb4e7359d7..24fe90e93b 100644
--- a/src/components/LoadingButton/LoadingButton.story.js
+++ b/src/components/LoadingButton/LoadingButton.story.js
@@ -18,29 +18,22 @@ import { action } from '@storybook/addon-actions';
 
 import LoadingButton from '.';
 
+const DEFAULT = 'default';
+
 // eslint-disable-next-line react/prop-types
 const LoadingButtonWithState = ({ exitAnimation, ...props }) => {
-  // get loading button status animation or set as default
-  const variation = exitAnimation || 'DEFAULT';
+  const variation = exitAnimation || DEFAULT;
 
   const [loading, setLoading] = useState({
-    DEFAULT: false,
-    SUCCESS: false,
-    ERROR: false
+    [LoadingButton.SUCCESS]: false,
+    [LoadingButton.ERROR]: false,
+    [DEFAULT]: false
   });
 
   const handleClick = () => {
-    // trigger loading state
-    setLoading({
-      ...loading,
-      [variation]: true
-    });
-    // reset loading
+    setLoading({ ...loading, [variation]: true });
     setTimeout(() => {
-      setLoading({
-        ...loading,
-        [variation]: false
-      });
+      setLoading({ ...loading, [variation]: false });
     }, 1000);
   };
 
@@ -48,7 +41,7 @@ const LoadingButtonWithState = ({ exitAnimation, ...props }) => {
     <LoadingButton
       {...props}
       isLoading={loading[variation]}
-      exitAnimation={exitAnimation && LoadingButton[exitAnimation]}
+      exitAnimation={exitAnimation}
       onClick={handleClick}
     />
   );
@@ -62,31 +55,31 @@ export default {
   }
 };
 
-export const successAnimation = () => (
+export const base = () => (
   <LoadingButtonWithState
     onAnimationComplete={action('animation completed')}
-    exitAnimation={LoadingButton.SUCCESS}
     primary
   >
-    Click me
+    Things take time
   </LoadingButtonWithState>
 );
 
-export const errorAnimation = () => (
+export const success = () => (
   <LoadingButtonWithState
     onAnimationComplete={action('animation completed')}
-    exitAnimation={LoadingButton.ERROR}
+    exitAnimation={LoadingButton.SUCCESS}
     primary
   >
-    Click me
+    I am a success!
   </LoadingButtonWithState>
 );
 
-export const noExitAnimation = () => (
+export const error = () => (
   <LoadingButtonWithState
     onAnimationComplete={action('animation completed')}
+    exitAnimation={LoadingButton.ERROR}
     primary
   >
-    Click me
+    I will fail.
   </LoadingButtonWithState>
 );
diff --git a/src/components/LoadingButton/__snapshots__/LoadingButton.spec.js.snap b/src/components/LoadingButton/__snapshots__/LoadingButton.spec.js.snap
index edee59efe3..f91424d3cb 100644
--- a/src/components/LoadingButton/__snapshots__/LoadingButton.spec.js.snap
+++ b/src/components/LoadingButton/__snapshots__/LoadingButton.spec.js.snap
@@ -15,7 +15,7 @@ exports[`LoadingButton Style tests should render with default styles 1`] = `
   }
 }
 
-.circuit-9 {
+.circuit-8 {
   background-color: #FAFBFC;
   border-color: #D8DDE1;
   border-radius: 4px;
@@ -34,38 +34,40 @@ exports[`LoadingButton Style tests should render with default styles 1`] = `
   font-size: 16px;
   line-height: 24px;
   padding: calc(8px - 0px) calc(24px - 0px);
+  position: relative;
+  overflow: hidden;
 }
 
-.circuit-9:active {
+.circuit-8:active {
   background-color: #D8DDE1;
   border-color: #9DA7B1;
   box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3);
 }
 
-.circuit-9:focus {
+.circuit-8:focus {
   border-color: #9DA7B1;
   border-width: 2px;
   outline: 0;
   padding: calc(8px - 1px) calc(24px - 1px);
 }
 
-.circuit-9:hover {
+.circuit-8:hover {
   background-color: #D8DDE1;
 }
 
-.circuit-9:hover,
-.circuit-9:active {
+.circuit-8:hover,
+.circuit-8:active {
   border-color: #9DA7B1;
   border-width: 1px;
   padding: calc(8px - 0px) calc(24px - 0px);
 }
 
-.circuit-9[href] {
+.circuit-8[href] {
   display: inline-block;
 }
 
-.circuit-9:disabled,
-.circuit-9[disabled] {
+.circuit-8:disabled,
+.circuit-8[disabled] {
   opacity: 0.4;
   pointer-events: none;
   -webkit-user-selectable: none;
@@ -74,10 +76,6 @@ exports[`LoadingButton Style tests should render with default styles 1`] = `
   user-selectable: none;
 }
 
-.circuit-7 {
-  position: relative;
-}
-
 .circuit-3 {
   opacity: 0;
   max-width: -webkit-fit-content;
@@ -114,6 +112,7 @@ exports[`LoadingButton Style tests should render with default styles 1`] = `
 }
 
 .circuit-5 {
+  display: inline-block;
   opacity: 1;
   -webkit-transform: translate(0,0);
   -ms-transform: translate(0,0);
@@ -124,28 +123,24 @@ exports[`LoadingButton Style tests should render with default styles 1`] = `
 }
 
 <button
-  class="circuit-9 circuit-10"
+  class="circuit-7 circuit-8 circuit-9"
 >
   <div
-    class="circuit-7 circuit-8"
+    aria-busy="true"
+    aria-live="assertive"
+    class="circuit-2 circuit-3 circuit-4"
+    role="alert"
   >
     <div
-      aria-busy="true"
-      aria-live="assertive"
-      class="circuit-2 circuit-3 circuit-4"
-      role="alert"
+      class="circuit-0 circuit-1"
+      dark="0"
     >
-      <div
-        class="circuit-0 circuit-1"
-        dark="0"
-      >
-        spinner.svg
-      </div>
+      spinner.svg
     </div>
-    <div
-      class="circuit-5 circuit-6"
-    />
   </div>
+  <span
+    class="circuit-5 circuit-6"
+  />
 </button>
 `;
 
@@ -164,7 +159,7 @@ exports[`LoadingButton Style tests should render with default styles after loadi
   }
 }
 
-.circuit-9 {
+.circuit-8 {
   background-color: #FAFBFC;
   border-color: #D8DDE1;
   border-radius: 4px;
@@ -183,38 +178,40 @@ exports[`LoadingButton Style tests should render with default styles after loadi
   font-size: 16px;
   line-height: 24px;
   padding: calc(8px - 0px) calc(24px - 0px);
+  position: relative;
+  overflow: hidden;
 }
 
-.circuit-9:active {
+.circuit-8:active {
   background-color: #D8DDE1;
   border-color: #9DA7B1;
   box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3);
 }
 
-.circuit-9:focus {
+.circuit-8:focus {
   border-color: #9DA7B1;
   border-width: 2px;
   outline: 0;
   padding: calc(8px - 1px) calc(24px - 1px);
 }
 
-.circuit-9:hover {
+.circuit-8:hover {
   background-color: #D8DDE1;
 }
 
-.circuit-9:hover,
-.circuit-9:active {
+.circuit-8:hover,
+.circuit-8:active {
   border-color: #9DA7B1;
   border-width: 1px;
   padding: calc(8px - 0px) calc(24px - 0px);
 }
 
-.circuit-9[href] {
+.circuit-8[href] {
   display: inline-block;
 }
 
-.circuit-9:disabled,
-.circuit-9[disabled] {
+.circuit-8:disabled,
+.circuit-8[disabled] {
   opacity: 0.4;
   pointer-events: none;
   -webkit-user-selectable: none;
@@ -223,10 +220,6 @@ exports[`LoadingButton Style tests should render with default styles after loadi
   user-selectable: none;
 }
 
-.circuit-7 {
-  position: relative;
-}
-
 .circuit-3 {
   opacity: 0;
   max-width: -webkit-fit-content;
@@ -263,6 +256,7 @@ exports[`LoadingButton Style tests should render with default styles after loadi
 }
 
 .circuit-5 {
+  display: inline-block;
   opacity: 1;
   -webkit-transform: translate(0,0);
   -ms-transform: translate(0,0);
@@ -273,28 +267,24 @@ exports[`LoadingButton Style tests should render with default styles after loadi
 }
 
 <button
-  class="circuit-9 circuit-10"
+  class="circuit-7 circuit-8 circuit-9"
 >
   <div
-    class="circuit-7 circuit-8"
+    aria-busy="true"
+    aria-live="assertive"
+    class="circuit-2 circuit-3 circuit-4"
+    role="alert"
   >
     <div
-      aria-busy="true"
-      aria-live="assertive"
-      class="circuit-2 circuit-3 circuit-4"
-      role="alert"
+      class="circuit-0 circuit-1"
+      dark="0"
     >
-      <div
-        class="circuit-0 circuit-1"
-        dark="0"
-      >
-        spinner.svg
-      </div>
+      spinner.svg
     </div>
-    <div
-      class="circuit-5 circuit-6"
-    />
   </div>
+  <span
+    class="circuit-5 circuit-6"
+  />
 </button>
 `;
 
@@ -313,10 +303,6 @@ exports[`LoadingButton Style tests should render with loading styles 1`] = `
   }
 }
 
-.circuit-7 {
-  position: relative;
-}
-
 .circuit-0 {
   width: 100%;
   height: 100%;
@@ -334,7 +320,7 @@ exports[`LoadingButton Style tests should render with loading styles 1`] = `
   transform-origin: 50% 50%;
 }
 
-.circuit-9 {
+.circuit-8 {
   background-color: #FAFBFC;
   border-color: #D8DDE1;
   border-radius: 4px;
@@ -355,38 +341,40 @@ exports[`LoadingButton Style tests should render with loading styles 1`] = `
   padding: calc(8px - 0px) calc(24px - 0px);
   overflow-y: hidden;
   pointer-events: none;
+  position: relative;
+  overflow: hidden;
 }
 
-.circuit-9:active {
+.circuit-8:active {
   background-color: #D8DDE1;
   border-color: #9DA7B1;
   box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3);
 }
 
-.circuit-9:focus {
+.circuit-8:focus {
   border-color: #9DA7B1;
   border-width: 2px;
   outline: 0;
   padding: calc(8px - 1px) calc(24px - 1px);
 }
 
-.circuit-9:hover {
+.circuit-8:hover {
   background-color: #D8DDE1;
 }
 
-.circuit-9:hover,
-.circuit-9:active {
+.circuit-8:hover,
+.circuit-8:active {
   border-color: #9DA7B1;
   border-width: 1px;
   padding: calc(8px - 0px) calc(24px - 0px);
 }
 
-.circuit-9[href] {
+.circuit-8[href] {
   display: inline-block;
 }
 
-.circuit-9:disabled,
-.circuit-9[disabled] {
+.circuit-8:disabled,
+.circuit-8[disabled] {
   opacity: 0.4;
   pointer-events: none;
   -webkit-user-selectable: none;
@@ -415,6 +403,7 @@ exports[`LoadingButton Style tests should render with loading styles 1`] = `
 }
 
 .circuit-5 {
+  display: inline-block;
   opacity: 1;
   -webkit-transform: translate(0,0);
   -ms-transform: translate(0,0);
@@ -429,27 +418,23 @@ exports[`LoadingButton Style tests should render with loading styles 1`] = `
 }
 
 <button
-  class="circuit-9 circuit-10"
+  class="circuit-7 circuit-8 circuit-9"
 >
   <div
-    class="circuit-7 circuit-8"
+    aria-busy="true"
+    aria-live="assertive"
+    class="circuit-2 circuit-3 circuit-4"
+    role="alert"
   >
     <div
-      aria-busy="true"
-      aria-live="assertive"
-      class="circuit-2 circuit-3 circuit-4"
-      role="alert"
+      class="circuit-0 circuit-1"
+      dark="0"
     >
-      <div
-        class="circuit-0 circuit-1"
-        dark="0"
-      >
-        spinner.svg
-      </div>
+      spinner.svg
     </div>
-    <div
-      class="circuit-5 circuit-6"
-    />
   </div>
+  <span
+    class="circuit-5 circuit-6"
+  />
 </button>
 `;
diff --git a/src/components/LoadingButton/components/Button/Button.js b/src/components/LoadingButton/components/Button/Button.js
index d6eb570414..f5f90d2cbe 100644
--- a/src/components/LoadingButton/components/Button/Button.js
+++ b/src/components/LoadingButton/components/Button/Button.js
@@ -26,7 +26,13 @@ import {
   BUTTON_DEFAULT_PROPS
 } from '../../../Button/constants';
 
+const StyledButton = styled(Button)`
+  position: relative;
+  overflow: hidden;
+`;
+
 const childrenWrapperStyles = ({ theme }) => css`
+  display: inline-block;
   opacity: 1;
   transform: translate(0, 0);
   transition: opacity ${theme.transitions.default},
@@ -40,11 +46,7 @@ const childrenWrapperLoadingStyles = ({ loadingState }) =>
     transform: translate(0, 100%);
   `;
 
-const Wrapper = styled.div`
-  position: relative;
-`;
-
-const ChildrenWrapper = styled.div`
+const ChildrenWrapper = styled.span`
   ${childrenWrapperStyles};
   ${childrenWrapperLoadingStyles};
 `;
@@ -57,17 +59,15 @@ const LoadingButton = ({
   isLoading,
   ...otherProps
 }) => (
-  <Button
+  <StyledButton
     {...otherProps}
     size={size}
     onClick={isLoading ? null : onClick}
     isLoading={isLoading}
   >
-    <Wrapper>
-      <LoadingIcon size={size} loadingState={loadingState} />
-      <ChildrenWrapper loadingState={loadingState}>{children}</ChildrenWrapper>
-    </Wrapper>
-  </Button>
+    <LoadingIcon size={size} loadingState={loadingState} />
+    <ChildrenWrapper loadingState={loadingState}>{children}</ChildrenWrapper>
+  </StyledButton>
 );
 
 LoadingButton.propTypes = {
diff --git a/src/components/LoadingButton/components/Button/__snapshots__/Button.spec.js.snap b/src/components/LoadingButton/components/Button/__snapshots__/Button.spec.js.snap
index b2aa68ec31..ae40793d77 100644
--- a/src/components/LoadingButton/components/Button/__snapshots__/Button.spec.js.snap
+++ b/src/components/LoadingButton/components/Button/__snapshots__/Button.spec.js.snap
@@ -15,7 +15,7 @@ exports[`Button Style tests should have active loading styles 1`] = `
   }
 }
 
-.circuit-9 {
+.circuit-8 {
   background-color: #FAFBFC;
   border-color: #D8DDE1;
   border-radius: 4px;
@@ -34,38 +34,40 @@ exports[`Button Style tests should have active loading styles 1`] = `
   font-size: 16px;
   line-height: 24px;
   padding: calc(8px - 0px) calc(24px - 0px);
+  position: relative;
+  overflow: hidden;
 }
 
-.circuit-9:active {
+.circuit-8:active {
   background-color: #D8DDE1;
   border-color: #9DA7B1;
   box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3);
 }
 
-.circuit-9:focus {
+.circuit-8:focus {
   border-color: #9DA7B1;
   border-width: 2px;
   outline: 0;
   padding: calc(8px - 1px) calc(24px - 1px);
 }
 
-.circuit-9:hover {
+.circuit-8:hover {
   background-color: #D8DDE1;
 }
 
-.circuit-9:hover,
-.circuit-9:active {
+.circuit-8:hover,
+.circuit-8:active {
   border-color: #9DA7B1;
   border-width: 1px;
   padding: calc(8px - 0px) calc(24px - 0px);
 }
 
-.circuit-9[href] {
+.circuit-8[href] {
   display: inline-block;
 }
 
-.circuit-9:disabled,
-.circuit-9[disabled] {
+.circuit-8:disabled,
+.circuit-8[disabled] {
   opacity: 0.4;
   pointer-events: none;
   -webkit-user-selectable: none;
@@ -74,10 +76,6 @@ exports[`Button Style tests should have active loading styles 1`] = `
   user-selectable: none;
 }
 
-.circuit-7 {
-  position: relative;
-}
-
 .circuit-0 {
   width: 100%;
   height: 100%;
@@ -115,6 +113,7 @@ exports[`Button Style tests should have active loading styles 1`] = `
 }
 
 .circuit-5 {
+  display: inline-block;
   opacity: 1;
   -webkit-transform: translate(0,0);
   -ms-transform: translate(0,0);
@@ -129,28 +128,24 @@ exports[`Button Style tests should have active loading styles 1`] = `
 }
 
 <button
-  class="circuit-9 circuit-10"
+  class="circuit-7 circuit-8 circuit-9"
 >
   <div
-    class="circuit-7 circuit-8"
+    aria-busy="true"
+    aria-live="assertive"
+    class="circuit-2 circuit-3 circuit-4"
+    role="alert"
   >
     <div
-      aria-busy="true"
-      aria-live="assertive"
-      class="circuit-2 circuit-3 circuit-4"
-      role="alert"
+      class="circuit-0 circuit-1"
+      dark="0"
     >
-      <div
-        class="circuit-0 circuit-1"
-        dark="0"
-      >
-        spinner.svg
-      </div>
+      spinner.svg
     </div>
-    <div
-      class="circuit-5 circuit-6"
-    />
   </div>
+  <span
+    class="circuit-5 circuit-6"
+  />
 </button>
 `;
 
@@ -169,7 +164,7 @@ exports[`Button Style tests should have default styles 1`] = `
   }
 }
 
-.circuit-9 {
+.circuit-8 {
   background-color: #FAFBFC;
   border-color: #D8DDE1;
   border-radius: 4px;
@@ -188,38 +183,40 @@ exports[`Button Style tests should have default styles 1`] = `
   font-size: 16px;
   line-height: 24px;
   padding: calc(8px - 0px) calc(24px - 0px);
+  position: relative;
+  overflow: hidden;
 }
 
-.circuit-9:active {
+.circuit-8:active {
   background-color: #D8DDE1;
   border-color: #9DA7B1;
   box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3);
 }
 
-.circuit-9:focus {
+.circuit-8:focus {
   border-color: #9DA7B1;
   border-width: 2px;
   outline: 0;
   padding: calc(8px - 1px) calc(24px - 1px);
 }
 
-.circuit-9:hover {
+.circuit-8:hover {
   background-color: #D8DDE1;
 }
 
-.circuit-9:hover,
-.circuit-9:active {
+.circuit-8:hover,
+.circuit-8:active {
   border-color: #9DA7B1;
   border-width: 1px;
   padding: calc(8px - 0px) calc(24px - 0px);
 }
 
-.circuit-9[href] {
+.circuit-8[href] {
   display: inline-block;
 }
 
-.circuit-9:disabled,
-.circuit-9[disabled] {
+.circuit-8:disabled,
+.circuit-8[disabled] {
   opacity: 0.4;
   pointer-events: none;
   -webkit-user-selectable: none;
@@ -228,10 +225,6 @@ exports[`Button Style tests should have default styles 1`] = `
   user-selectable: none;
 }
 
-.circuit-7 {
-  position: relative;
-}
-
 .circuit-3 {
   opacity: 0;
   max-width: -webkit-fit-content;
@@ -268,6 +261,7 @@ exports[`Button Style tests should have default styles 1`] = `
 }
 
 .circuit-5 {
+  display: inline-block;
   opacity: 1;
   -webkit-transform: translate(0,0);
   -ms-transform: translate(0,0);
@@ -278,28 +272,24 @@ exports[`Button Style tests should have default styles 1`] = `
 }
 
 <button
-  class="circuit-9 circuit-10"
+  class="circuit-7 circuit-8 circuit-9"
 >
   <div
-    class="circuit-7 circuit-8"
+    aria-busy="true"
+    aria-live="assertive"
+    class="circuit-2 circuit-3 circuit-4"
+    role="alert"
   >
     <div
-      aria-busy="true"
-      aria-live="assertive"
-      class="circuit-2 circuit-3 circuit-4"
-      role="alert"
+      class="circuit-0 circuit-1"
+      dark="0"
     >
-      <div
-        class="circuit-0 circuit-1"
-        dark="0"
-      >
-        spinner.svg
-      </div>
+      spinner.svg
     </div>
-    <div
-      class="circuit-5 circuit-6"
-    />
   </div>
+  <span
+    class="circuit-5 circuit-6"
+  />
 </button>
 `;
 
@@ -318,10 +308,6 @@ exports[`Button Style tests should have isLoading styles 1`] = `
   }
 }
 
-.circuit-7 {
-  position: relative;
-}
-
 .circuit-3 {
   opacity: 0;
   max-width: -webkit-fit-content;
@@ -358,6 +344,7 @@ exports[`Button Style tests should have isLoading styles 1`] = `
 }
 
 .circuit-5 {
+  display: inline-block;
   opacity: 1;
   -webkit-transform: translate(0,0);
   -ms-transform: translate(0,0);
@@ -367,7 +354,7 @@ exports[`Button Style tests should have isLoading styles 1`] = `
   transition: opacity 200ms ease-in-out,transform 200ms ease-in-out;
 }
 
-.circuit-9 {
+.circuit-8 {
   background-color: #FAFBFC;
   border-color: #D8DDE1;
   border-radius: 4px;
@@ -388,38 +375,40 @@ exports[`Button Style tests should have isLoading styles 1`] = `
   padding: calc(8px - 0px) calc(24px - 0px);
   overflow-y: hidden;
   pointer-events: none;
+  position: relative;
+  overflow: hidden;
 }
 
-.circuit-9:active {
+.circuit-8:active {
   background-color: #D8DDE1;
   border-color: #9DA7B1;
   box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3);
 }
 
-.circuit-9:focus {
+.circuit-8:focus {
   border-color: #9DA7B1;
   border-width: 2px;
   outline: 0;
   padding: calc(8px - 1px) calc(24px - 1px);
 }
 
-.circuit-9:hover {
+.circuit-8:hover {
   background-color: #D8DDE1;
 }
 
-.circuit-9:hover,
-.circuit-9:active {
+.circuit-8:hover,
+.circuit-8:active {
   border-color: #9DA7B1;
   border-width: 1px;
   padding: calc(8px - 0px) calc(24px - 0px);
 }
 
-.circuit-9[href] {
+.circuit-8[href] {
   display: inline-block;
 }
 
-.circuit-9:disabled,
-.circuit-9[disabled] {
+.circuit-8:disabled,
+.circuit-8[disabled] {
   opacity: 0.4;
   pointer-events: none;
   -webkit-user-selectable: none;
@@ -429,27 +418,23 @@ exports[`Button Style tests should have isLoading styles 1`] = `
 }
 
 <button
-  class="circuit-9 circuit-10"
+  class="circuit-7 circuit-8 circuit-9"
 >
   <div
-    class="circuit-7 circuit-8"
+    aria-busy="true"
+    aria-live="assertive"
+    class="circuit-2 circuit-3 circuit-4"
+    role="alert"
   >
     <div
-      aria-busy="true"
-      aria-live="assertive"
-      class="circuit-2 circuit-3 circuit-4"
-      role="alert"
+      class="circuit-0 circuit-1"
+      dark="0"
     >
-      <div
-        class="circuit-0 circuit-1"
-        dark="0"
-      >
-        spinner.svg
-      </div>
+      spinner.svg
     </div>
-    <div
-      class="circuit-5 circuit-6"
-    />
   </div>
+  <span
+    class="circuit-5 circuit-6"
+  />
 </button>
 `;
diff --git a/src/components/LoadingButton/components/LoadingIcon/LoadingIcon.js b/src/components/LoadingButton/components/LoadingIcon/LoadingIcon.js
index 74ad784318..79ebf3bd2c 100644
--- a/src/components/LoadingButton/components/LoadingIcon/LoadingIcon.js
+++ b/src/components/LoadingButton/components/LoadingIcon/LoadingIcon.js
@@ -32,7 +32,6 @@ const { KILO, MEGA, GIGA } = sizes;
 /**
  * Keyframes
  */
-
 const iconEnter = keyframes`
   0% {
     opacity: 1;
@@ -48,7 +47,6 @@ const iconEnter = keyframes`
 /**
  * General purpose style functions.
  */
-
 const centeredStyles = () => css`
   position: absolute;
   left: 50%;
@@ -74,7 +72,6 @@ const sizeStyles = label => ({ theme, size }) => {
 /**
  * Icon styles
  */
-
 const Icon = styled.div`
   label: loading-icon;
   transform: scale3d(0, 0, 0);
@@ -94,7 +91,6 @@ const IconContainer = styled.div(
 /**
  * Direct sub-components
  */
-
 const Spinner = styled(PureSpinner)(
   sizeStyles('loading-icon__spinner'),
   centeredStyles
@@ -108,10 +104,10 @@ const StatusIcon = ({ as, size }) => (
 );
 
 StatusIcon.propTypes = {
+  as: PropTypes.oneOf([SuccessSvg, ErrorSvg]),
   /**
    * Size prop from the Button.
    */
-  as: PropTypes.oneOf([SuccessSvg, ErrorSvg]),
   size: SIZE_PROP_TYPE
 };