diff --git a/components/doc/confirmdialog/responsivedoc.js b/components/doc/confirmdialog/responsivedoc.js
new file mode 100644
index 0000000000..d5e665fce9
--- /dev/null
+++ b/components/doc/confirmdialog/responsivedoc.js
@@ -0,0 +1,146 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { ConfirmDialog } from '@/components/lib/confirmdialog/ConfirmDialog';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef, useState } from 'react';
+
+export function ResponsiveDoc(props) {
+    const [visible, setVisible] = useState(false);
+    const toast = useRef(null);
+
+    const accept = () => {
+        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    };
+
+    const reject = () => {
+        toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+<ConfirmDialog
+    group="declarative"
+    visible={visible}
+    onHide={() => setVisible(false)}
+    message="Are you sure you want to proceed?"
+    header="Confirmation"
+    icon="pi pi-exclamation-triangle"
+    accept={accept}
+    reject={reject}
+    style={{ width: '50vw' }}
+    breakpoints={{ '1100px': '75vw', '960px': '100vw' }}
+/>
+<Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
+        `,
+        javascript: `
+import React, { useState, useRef } from 'react';
+import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog';
+import { Toast } from 'primereact/toast';
+import { Button } from 'primereact/button';
+
+export default function DeclarativeDemo() {
+    const [visible, setVisible] = useState(false);
+    const toast = useRef(null);
+
+    const accept = () => {
+        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    }
+
+    const reject = () => {
+        toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    }
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <ConfirmDialog
+                group="declarative"
+                visible={visible}
+                onHide={() => setVisible(false)}
+                message="Are you sure you want to proceed?"
+                header="Confirmation"
+                icon="pi pi-exclamation-triangle"
+                accept={accept}
+                reject={reject}
+                style={{ width: '50vw' }}
+                breakpoints={{ '1100px': '75vw', '960px': '100vw' }}
+            />
+            <div className="card flex justify-content-center">
+                <Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
+            </div>
+        </>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useRef } from 'react';
+import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog';
+import { Toast } from 'primereact/toast';
+import { Button } from 'primefaces/button';
+
+export default function DeclarativeDemo() {
+    const [visible, setVisible] = useState<boolean>(false);
+    const toast = useRef<Toast>(null);
+
+    const accept = () => {
+        toast.current?.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    }
+
+    const reject = () => {
+        toast.current?.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    }
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <ConfirmDialog
+                group="declarative"
+                visible={visible}
+                onHide={() => setVisible(false)}
+                message="Are you sure you want to proceed?"
+                header="Confirmation"
+                icon="pi pi-exclamation-triangle"
+                accept={accept}
+                reject={reject}
+                style={{ width: '50vw' }}
+                breakpoints={{ '1100px': '75vw', '960px': '100vw' }}
+            />
+            <div className="card flex justify-content-center">
+                <Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
+            </div>
+        </>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    ConfirmDialog width can be adjusted per screen size with the breakpoints option where a key defines the max-width for the breakpoint and value for the corresponding width. When no breakpoint matches width defined in style property
+                    is used.
+                </p>
+            </DocSectionText>
+            <Toast ref={toast} />
+            <ConfirmDialog
+                group="declarative"
+                visible={visible}
+                onHide={() => setVisible(false)}
+                message="Are you sure you want to proceed?"
+                header="Confirmation"
+                icon="pi pi-exclamation-triangle"
+                accept={accept}
+                reject={reject}
+                style={{ width: '50vw' }}
+                breakpoints={{ '1100px': '75vw', '960px': '100vw' }}
+            />
+            <div className="card flex justify-content-center">
+                <Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/pages/confirmdialog/index.js b/pages/confirmdialog/index.js
index 8b17626305..cce3c9c8d6 100644
--- a/pages/confirmdialog/index.js
+++ b/pages/confirmdialog/index.js
@@ -3,14 +3,15 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
 import { AccessibilityDoc } from '@/components/doc/confirmdialog/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/confirmdialog/basicdoc';
 import { DeclarativeDoc } from '@/components/doc/confirmdialog/declarativedoc';
+import { HeadlessDoc } from '@/components/doc/confirmdialog/headlessdoc';
 import { ImportDoc } from '@/components/doc/confirmdialog/importdoc';
 import { PositionDoc } from '@/components/doc/confirmdialog/positiondoc';
 import { PTDoc } from '@/components/doc/confirmdialog/pt/ptdoc';
 import { Wireframe } from '@/components/doc/confirmdialog/pt/wireframe';
-import { StyledDoc } from '@/components/doc/confirmdialog/theming/styleddoc';
+import { ResponsiveDoc } from '@/components/doc/confirmdialog/responsivedoc';
 import { TemplateDoc } from '@/components/doc/confirmdialog/templatedoc';
+import { StyledDoc } from '@/components/doc/confirmdialog/theming/styleddoc';
 import { TailwindDoc } from '@/components/doc/confirmdialog/theming/tailwinddoc';
-import { HeadlessDoc } from '@/components/doc/confirmdialog/headlessdoc';
 import { ConfirmDialog } from '@/components/lib/primereact.all';
 
 const ConfirmDialogDemo = () => {
@@ -40,6 +41,11 @@ const ConfirmDialogDemo = () => {
             label: 'Template',
             component: TemplateDoc
         },
+        {
+            id: 'responsive',
+            label: 'Responsive',
+            component: ResponsiveDoc
+        },
         {
             id: 'headless',
             label: 'Headless',