diff --git a/examples/cra-ts-kitchen-sink/src/stories/Button.tsx b/examples/cra-ts-kitchen-sink/src/stories/Button.tsx
index 233755a6a68f..7f0292d659cd 100644
--- a/examples/cra-ts-kitchen-sink/src/stories/Button.tsx
+++ b/examples/cra-ts-kitchen-sink/src/stories/Button.tsx
@@ -5,6 +5,11 @@ interface ButtonProps {
    * Simple click handler
    */
   onClick?: () => void;
+
+  /**
+   * Is primary?
+   */
+  primary: boolean;
 }
 
 /**
@@ -15,3 +20,7 @@ export const Button: FC<ButtonProps> = ({ children, onClick }) => (
     {children}
   </button>
 );
+
+Button.defaultProps = {
+  primary: true,
+};
diff --git a/lib/components/src/blocks/PropsTable/PropValue.tsx b/lib/components/src/blocks/PropsTable/PropValue.tsx
index f86e8dec98ba..1c7ac698c09a 100644
--- a/lib/components/src/blocks/PropsTable/PropValue.tsx
+++ b/lib/components/src/blocks/PropsTable/PropValue.tsx
@@ -76,8 +76,12 @@ const PropSummary: FC<PropSummaryProps> = ({ value }) => {
 
   const [isOpen, setIsOpen] = useState(false);
 
+  // summary is used for the default value
+  // below check fixes not displaying default values for boolean typescript vars
+  const summaryAsString =
+    summary && typeof summary.toString === 'function' ? summary.toString() : summary;
   if (isNil(detail)) {
-    return <PropText text={summary} />;
+    return <PropText text={summaryAsString} />;
   }
 
   return (
@@ -98,7 +102,7 @@ const PropSummary: FC<PropSummaryProps> = ({ value }) => {
       }
     >
       <Expandable className="sbdocs-expandable">
-        <span>{summary}</span>
+        <span>{summaryAsString}</span>
         <ArrowIcon icon={isOpen ? 'arrowup' : 'arrowdown'} />
       </Expandable>
     </WithTooltipPure>