diff --git a/src/pages/components/modal/code.mdx b/src/pages/components/modal/code.mdx
index e6d1a135afb..7004b3b8db3 100755
--- a/src/pages/components/modal/code.mdx
+++ b/src/pages/components/modal/code.mdx
@@ -60,6 +60,14 @@ documentation, see the Storybooks for each framework below.
       id: 'scrolling-content',
       label: 'With scrolling content',
     },
+    {
+      id: 'with-one-button',
+      label: 'With one button',
+    },
+    {
+      id: 'with-three-buttons',
+      label: 'With three buttons',
+    },
   ]}>
   <ComponentVariant
     id="modal"
@@ -128,5 +136,56 @@ documentation, see the Storybooks for each framework below.
         </p>
       </>
     </ModalWrapper>
+`}</ComponentVariant>
+  <ComponentVariant
+    id="with-one-button"
+    links={{
+      React:
+        'https://react.carbondesignsystem.com/?path=/story/components-modal--default',
+      Angular:
+        'https://angular.carbondesignsystem.com/?path=/story/components-modal--basic',
+      Vue:
+        'http://vue.carbondesignsystem.com/?path=/story/components-cvmodal--default',
+      Vanilla: 'https://the-carbon-components.netlify.com/?nav=modal',
+    }}>{`
+    <ModalWrapper
+      buttonTriggerText="Launch modal"
+      modalHeading="Modal heading"
+      modalLabel="Label"
+      secondaryButtonText={null}
+    >
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero in augue mattis, a molestie metus vestibulum. Aliquam placerat felis ultrices lorem condimentum, nec ullamcorper felis porttitor. </p>
+    </ModalWrapper>
+`}</ComponentVariant>
+  <ComponentVariant
+    id="with-three-buttons"
+    links={{
+      React:
+        'https://react.carbondesignsystem.com/?path=/story/components-modal--default',
+      Angular:
+        'https://angular.carbondesignsystem.com/?path=/story/components-modal--basic',
+      Vue:
+        'http://vue.carbondesignsystem.com/?path=/story/components-cvmodal--default',
+      Vanilla: 'https://the-carbon-components.netlify.com/?nav=modal',
+    }}>{`
+    <ModalWrapper
+      buttonTriggerText="Launch modal"
+      modalHeading="Modal heading"
+      modalLabel="Label"
+      secondaryButtons={
+        [
+          {
+            buttonText: 'Keep both',
+            onClick: () => {},
+          },
+          {
+            buttonText: 'Rename',
+            onClick: () => {},
+          }
+        ]
+      }
+    >
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero in augue mattis, a molestie metus vestibulum. Aliquam placerat felis ultrices lorem condimentum, nec ullamcorper felis porttitor. </p>
+    </ModalWrapper>
 `}</ComponentVariant>
 </ComponentDemo>
diff --git a/src/pages/components/modal/usage.mdx b/src/pages/components/modal/usage.mdx
index 4254a09191c..32cf2d00127 100755
--- a/src/pages/components/modal/usage.mdx
+++ b/src/pages/components/modal/usage.mdx
@@ -81,6 +81,14 @@ destructive or irreversible then use a transactional danger modal.
       id: 'scrolling-content',
       label: 'With scrolling content',
     },
+    {
+      id: 'with-one-button',
+      label: 'With one button',
+    },
+    {
+      id: 'with-three-buttons',
+      label: 'With three buttons',
+    },
   ]}>
   <ComponentVariant
     id="modal"
@@ -149,6 +157,57 @@ destructive or irreversible then use a transactional danger modal.
         </p>
       </>
     </ModalWrapper>
+`}</ComponentVariant>
+  <ComponentVariant
+    id="with-one-button"
+    links={{
+      React:
+        'https://react.carbondesignsystem.com/?path=/story/components-modal--default',
+      Angular:
+        'https://angular.carbondesignsystem.com/?path=/story/components-modal--basic',
+      Vue:
+        'http://vue.carbondesignsystem.com/?path=/story/components-cvmodal--default',
+      Vanilla: 'https://the-carbon-components.netlify.com/?nav=modal',
+    }}>{`
+    <ModalWrapper
+      buttonTriggerText="Launch modal"
+      modalHeading="Modal heading"
+      modalLabel="Label"
+      secondaryButtonText={null}
+    >
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero in augue mattis, a molestie metus vestibulum. Aliquam placerat felis ultrices lorem condimentum, nec ullamcorper felis porttitor. </p>
+    </ModalWrapper>
+`}</ComponentVariant>
+  <ComponentVariant
+    id="with-three-buttons"
+    links={{
+      React:
+        'https://react.carbondesignsystem.com/?path=/story/components-modal--default',
+      Angular:
+        'https://angular.carbondesignsystem.com/?path=/story/components-modal--basic',
+      Vue:
+        'http://vue.carbondesignsystem.com/?path=/story/components-cvmodal--default',
+      Vanilla: 'https://the-carbon-components.netlify.com/?nav=modal',
+    }}>{`
+    <ModalWrapper
+      buttonTriggerText="Launch modal"
+      modalHeading="Modal heading"
+      modalLabel="Label"
+      secondaryButtons={
+        [
+          {
+            buttonText: 'Keep both',
+            onClick: () => {},
+          },
+          {
+            buttonText: 'Rename',
+            onClick: () => {},
+          }
+        ]
+      }
+    >
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero in augue mattis, a molestie metus vestibulum. Aliquam placerat felis ultrices lorem condimentum, nec ullamcorper felis porttitor. </p>
+    </ModalWrapper>
 `}</ComponentVariant>
 </ComponentDemo>