diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index c65128e8c446..3ad77d088639 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -3738,9 +3738,6 @@ Map {
     "render": [Function],
   },
   "InlineLoading" => Object {
-    "defaultProps": Object {
-      "successDelay": 1500,
-    },
     "propTypes": Object {
       "className": Object {
         "type": "string",
diff --git a/packages/react/src/components/InlineLoading/InlineLoading-story.js b/packages/react/src/components/InlineLoading/InlineLoading-story.js
deleted file mode 100644
index 23731611e0bb..000000000000
--- a/packages/react/src/components/InlineLoading/InlineLoading-story.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React, { useState } from 'react';
-import { action } from '@storybook/addon-actions';
-import { withKnobs, number, select, text } from '@storybook/addon-knobs';
-import Button from '../Button';
-import InlineLoading from '../InlineLoading';
-import mdx from './InlineLoading.mdx';
-
-const props = () => ({
-  status: select(
-    'Loading status (status)',
-    ['inactive', 'active', 'finished', 'error'],
-    'active'
-  ),
-  iconDescription: text('Icon description (iconDescription)', 'loading'),
-  description: text(
-    'Loading progress description (description)',
-    'Loading data...'
-  ),
-  successDelay: number(
-    'The duration for successful state before `onSuccess` fires (successDelay)',
-    1500
-  ),
-  onSuccess: action('onSuccess'),
-});
-
-export default {
-  title: 'Components/InlineLoading',
-  component: InlineLoading,
-  decorators: [withKnobs],
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-};
-
-export const _InlineLoading = () => <InlineLoading {...props()} />;
-
-_InlineLoading.storyName = 'Inline loading';
-
-export const UxExample = () => {
-  function MockSubmission({ children }) {
-    const [isSubmitting, setIsSubmitting] = useState(false);
-    const [success, setSuccess] = useState(false);
-    const [description, setDescription] = useState('Submitting...');
-    const [ariaLive, setAriaLive] = useState('off');
-    const handleSubmit = () => {
-      setIsSubmitting(true);
-      setAriaLive('assertive');
-
-      // Instead of making a real request, we mock it with a timer
-      setTimeout(() => {
-        setIsSubmitting(false);
-        setSuccess(true);
-        setDescription('Submitted!');
-
-        // To make submittable again, we reset the state after a bit so the user gets completion feedback
-        setTimeout(() => {
-          setSuccess(false);
-          setDescription('Submitting...');
-          setAriaLive('off');
-        }, 1500);
-      }, 2000);
-    };
-
-    return children({
-      handleSubmit,
-      isSubmitting,
-      success,
-      description,
-      ariaLive,
-    });
-  }
-
-  MockSubmission.displayName = 'InlineLoading';
-  MockSubmission.__docgenInfo = {
-    ...InlineLoading.__docgenInfo,
-    props: {
-      ...InlineLoading.__docgenInfo.props,
-    },
-  };
-
-  return (
-    <MockSubmission>
-      {({ handleSubmit, isSubmitting, success, description, ariaLive }) => (
-        <div style={{ display: 'flex', width: '300px' }}>
-          <Button kind="secondary" disabled={isSubmitting || success}>
-            Cancel
-          </Button>
-          {isSubmitting || success ? (
-            <InlineLoading
-              style={{ marginLeft: '1rem' }}
-              description={description}
-              status={success ? 'finished' : 'active'}
-              aria-live={ariaLive}
-            />
-          ) : (
-            <Button onClick={handleSubmit}>Submit</Button>
-          )}
-        </div>
-      )}
-    </MockSubmission>
-  );
-};
-
-UxExample.storyName = 'UX example';
diff --git a/packages/react/src/components/InlineLoading/InlineLoading.js b/packages/react/src/components/InlineLoading/InlineLoading.js
index 0b0724fa3c05..e4d7a8641f0d 100644
--- a/packages/react/src/components/InlineLoading/InlineLoading.js
+++ b/packages/react/src/components/InlineLoading/InlineLoading.js
@@ -18,7 +18,7 @@ export default function InlineLoading({
   iconDescription,
   description,
   onSuccess,
-  successDelay,
+  successDelay = 1500,
   ...other
 }) {
   const prefix = usePrefix();
@@ -110,6 +110,3 @@ InlineLoading.propTypes = {
    */
   successDelay: PropTypes.number,
 };
-InlineLoading.defaultProps = {
-  successDelay: 1500,
-};
diff --git a/packages/react/src/components/InlineLoading/InlineLoading.mdx b/packages/react/src/components/InlineLoading/InlineLoading.mdx
index 4e9dc19f5a3b..91019c6dcda9 100644
--- a/packages/react/src/components/InlineLoading/InlineLoading.mdx
+++ b/packages/react/src/components/InlineLoading/InlineLoading.mdx
@@ -1,4 +1,5 @@
-import { Props } from '@storybook/addon-docs';
+import { Props, Preview, Story } from '@storybook/addon-docs';
+import InlineLoading from '../InlineLoading';
 
 # InlineLoading
 
@@ -12,6 +13,10 @@ import { Props } from '@storybook/addon-docs';
 
 ## Overview
 
+<Preview>
+  <Story id="components-inlineloading--default" />
+</Preview>
+
 ## Component API
 
 <Props />
diff --git a/packages/react/src/components/InlineLoading/next/InlineLoading.stories.js b/packages/react/src/components/InlineLoading/InlineLoading.stories.js
similarity index 76%
rename from packages/react/src/components/InlineLoading/next/InlineLoading.stories.js
rename to packages/react/src/components/InlineLoading/InlineLoading.stories.js
index eeff9da7ab53..b979eac387f5 100644
--- a/packages/react/src/components/InlineLoading/next/InlineLoading.stories.js
+++ b/packages/react/src/components/InlineLoading/InlineLoading.stories.js
@@ -6,12 +6,18 @@
  */
 
 import React, { useState } from 'react';
-import Button from '../../Button';
-import InlineLoading from '../';
+import Button from '../Button';
+import InlineLoading from '.';
+import mdx from './InlineLoading.mdx';
 
 export default {
   title: 'Components/InlineLoading',
   component: InlineLoading,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
 };
 
 export const Default = () => (
@@ -78,3 +84,35 @@ export const UxExample = () => {
     </MockSubmission>
   );
 };
+
+export const Playground = (args) => <InlineLoading {...args} />;
+
+Playground.argTypes = {
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+  description: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Loading',
+  },
+  iconDescription: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Loading data...',
+  },
+  onSuccess: {
+    table: {
+      disable: true,
+    },
+  },
+  successDelay: {
+    table: {
+      disable: true,
+    },
+  },
+};