diff --git a/src/Spinner.js b/src/Spinner.js
index 5ef511368..4b557d57f 100644
--- a/src/Spinner.js
+++ b/src/Spinner.js
@@ -4,12 +4,33 @@ import classNames from 'classnames';
 import { mapToCssModules, tagPropType } from './utils';
 
 const propTypes = {
+  /**
+   * Set a custom element for this component
+   */
   tag: tagPropType,
-  type: PropTypes.string,
+  /**
+   * Change animation of spinner
+   */
+  type: PropTypes.oneOf(['border', 'grow']),
+  /**
+   * Change size of spinner
+   */
   size: PropTypes.string,
-  color: PropTypes.string,
+  /**
+   * Change color of spinner
+   */
+  color: PropTypes.oneOf(['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']),
+  /**
+   * Add custom class
+   */
   className: PropTypes.string,
+  /**
+   * Change existing className with a new className
+   */
   cssModule: PropTypes.object,
+  /**
+   * Pass children so this component can wrap the child elements
+   */
   children: PropTypes.string
 };
 
diff --git a/stories/Spinner.stories.js b/stories/Spinner.stories.js
index 3ab8c4af0..9f6eff232 100644
--- a/stories/Spinner.stories.js
+++ b/stories/Spinner.stories.js
@@ -16,5 +16,10 @@ export default {
 };
 
 export { default as Spinner } from './examples/Spinner';
-export { default as SpinnerGrower } from './examples/SpinnerGrower';
+export { default as Colors } from './examples/SpinnerColors'
+export { default as GrowingSpinner } from './examples/SpinnerGrower';
+export { default as Alignment } from './examples/SpinnerAlignment';
+export { default as Size } from './examples/SpinnerSize';
+export { default as CustomSize } from './examples/SpinnerCustomSize';
+export { default as Buttons } from './examples/SpinnerButton';
 export { default as Props } from './examples/SpinnerProps';
\ No newline at end of file
diff --git a/stories/examples/SpinnerAlignment.js b/stories/examples/SpinnerAlignment.js
new file mode 100644
index 000000000..87310cfa3
--- /dev/null
+++ b/stories/examples/SpinnerAlignment.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Spinner } from 'reactstrap';
+
+const Example = (props) => {
+  return (
+    <Spinner className="m-5" color="primary" />
+  );
+}
+
+export default Example;
+
+Example.parameters = {
+  docs: {
+    description: {
+      story: 'Spinners in Bootstrap are built with rems, currentColor, and display: inline-flex. This means they can easily be resized, recolored, and quickly aligned.\
+\n\n\
+Use margin utilities like `.m-5` for easy spacing'
+    }
+  }
+}
\ No newline at end of file
diff --git a/stories/examples/SpinnerButton.js b/stories/examples/SpinnerButton.js
new file mode 100644
index 000000000..0f1211fd5
--- /dev/null
+++ b/stories/examples/SpinnerButton.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Spinner, Button } from 'reactstrap';
+
+const Example = (args) => {
+  return (
+    <>
+      <Button disabled color="primary">
+        <Spinner size="sm" />
+        <span> Loading</span>
+      </Button>
+    </>
+  );
+}
+
+export default Example;
+
+
+Example.parameters = {
+  docs: {
+    description: {
+      story: 'Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.'
+    }
+  }
+}
\ No newline at end of file
diff --git a/stories/examples/SpinnerColors.js b/stories/examples/SpinnerColors.js
new file mode 100644
index 000000000..d0ae68722
--- /dev/null
+++ b/stories/examples/SpinnerColors.js
@@ -0,0 +1,25 @@
+
+import React from 'react';
+import { Spinner } from 'reactstrap';
+import { colors } from './options';
+
+const Example = (args) => {
+  return (
+    <>
+      {colors.map((color) => (
+        <Spinner color={color} key={color} />
+      ))}
+    </>
+  );
+}
+
+export default Example;
+
+
+Example.parameters = {
+  docs: {
+    description: {
+      story: 'All standard visual variant colors can be applied for the spinner.'
+    }
+  }
+}
\ No newline at end of file
diff --git a/stories/examples/SpinnerCustomSize.js b/stories/examples/SpinnerCustomSize.js
new file mode 100644
index 000000000..32d2140cb
--- /dev/null
+++ b/stories/examples/SpinnerCustomSize.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Spinner } from 'reactstrap';
+
+const Example = (props) => {
+  return (
+    <>
+      <Spinner color="primary" style={{ width: '3rem', height: '3rem' }} />
+      <Spinner type="grow" color="primary" style={{ width: '3rem', height: '3rem' }} />
+    </>
+  );
+}
+
+export default Example;
+
+Example.parameters = {
+  docs: {
+    description: {
+      story: 'Or use custom css as needed'
+    }
+  }
+}
\ No newline at end of file
diff --git a/stories/examples/SpinnerGrower.js b/stories/examples/SpinnerGrower.js
index 557d88a6d..8034972b2 100644
--- a/stories/examples/SpinnerGrower.js
+++ b/stories/examples/SpinnerGrower.js
@@ -1,19 +1,23 @@
 import React from 'react';
 import { Spinner } from 'reactstrap';
+import { colors } from './options';
 
 const Example = (props) => {
   return (
-    <div>
-      <Spinner type="grow" color="primary" />
-      <Spinner type="grow" color="secondary" />
-      <Spinner type="grow" color="success" />
-      <Spinner type="grow" color="danger" />
-      <Spinner type="grow" color="warning" />
-      <Spinner type="grow" color="info" />
-      <Spinner type="grow" color="light" />
-      <Spinner type="grow" color="dark" />
-    </div>
+    <>
+      {colors.map((color) => (
+        <Spinner type="grow" color={color} key={color} />
+      ))}
+    </>
   );
 }
 
 export default Example;
+
+Example.parameters = {
+  docs: {
+    description: {
+      story: 'If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow! Once again you can apply all the colors as above.'
+    }
+  }
+}
\ No newline at end of file
diff --git a/stories/examples/SpinnerSize.js b/stories/examples/SpinnerSize.js
new file mode 100644
index 000000000..3fd7ad076
--- /dev/null
+++ b/stories/examples/SpinnerSize.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Spinner } from 'reactstrap';
+
+const Example = (props) => {
+  return (
+    <>
+      <Spinner color="primary" size="sm" />
+      <Spinner type="grow" color="primary" size="sm" />
+    </>
+  );
+}
+
+export default Example;
+
+Example.parameters = {
+  docs: {
+    description: {
+      story: 'Add `size="sm` to make a smaller spinner that can quickly be used within other components.'
+    }
+  }
+}
\ No newline at end of file