diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalCheckboxExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalCheckboxExample.tsx
index 3b1b08b4..cdafe212 100644
--- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalCheckboxExample.tsx
+++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalCheckboxExample.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import WarningModal from '@patternfly/react-component-groups/dist/dynamic/WarningModal';
-import { Button } from '@patternfly/react-core';
+import { Button, ButtonVariant } from '@patternfly/react-core';
 
 export const BasicExample: React.FunctionComponent = () => {
   const [ isOpen, setIsOpen ] = React.useState(false);
@@ -13,7 +13,7 @@ export const BasicExample: React.FunctionComponent = () => {
       onConfirm={() => setIsOpen(false)}
       withCheckbox
       checkboxLabel='Are you sure?'
-      confirmButtonVariant
+      confirmButtonVariant={ButtonVariant.danger}
     >
       Your page contains unsaved changes. Do you want to leave?
     </WarningModal>
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalDangerExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalDangerExample.tsx
index b6312f2c..35503bca 100644
--- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalDangerExample.tsx
+++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalDangerExample.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import WarningModal from '@patternfly/react-component-groups/dist/dynamic/WarningModal';
-import { Button } from '@patternfly/react-core';
+import { Button, ButtonVariant } from '@patternfly/react-core';
 
 export const BasicExample: React.FunctionComponent = () => {
   const [ isOpen, setIsOpen ] = React.useState(false);
@@ -9,7 +9,7 @@ export const BasicExample: React.FunctionComponent = () => {
     <WarningModal
       isOpen={isOpen}
       title='Unsaved changes'
-      confirmButtonVariant
+      confirmButtonVariant={ButtonVariant.danger}
       onClose={() => setIsOpen(false)}
       onConfirm={() => setIsOpen(false)}>
       Your page contains unsaved changes. Do you want to leave?