diff --git a/samples/notifications/dialog/closing-variations/src/index.css b/samples/notifications/dialog/closing-variations/src/index.css
deleted file mode 100644
index 1f53b8aa05..0000000000
--- a/samples/notifications/dialog/closing-variations/src/index.css
+++ /dev/null
@@ -1,2 +0,0 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
diff --git a/samples/notifications/dialog/closing-variations/src/index.tsx b/samples/notifications/dialog/closing-variations/src/index.tsx
deleted file mode 100644
index 5d74438aca..0000000000
--- a/samples/notifications/dialog/closing-variations/src/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useRef } from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import { IgrButton, IgrDialog, IgrSwitch, type IgrCheckboxChangeEventArgs } from 'igniteui-react';
-import 'igniteui-webcomponents/themes/light/bootstrap.css';
-
-export default function DialogClosingVariations() {
-    const dialog = useRef<IgrDialog>(null);
-
-    function onDialogShow() {
-        dialog.current?.show();
-    }
-
-    function onDialogHide() {
-        dialog.current?.hide();
-    }
-
-    function onSwitchChangeEscape(e: IgrCheckboxChangeEventArgs) {
-        dialog.current!.keepOpenOnEscape = e.detail.checked;
-    }
-
-    function onSwitchChangeClick(e: IgrCheckboxChangeEventArgs) {
-        dialog.current!.closeOnOutsideClick = e.detail.checked;
-    }
-
-    return (
-        <div className="container sample">
-            <IgrSwitch labelPosition="before" onChange={onSwitchChangeEscape}><span>keepOpenOnEscape</span></IgrSwitch>
-            <IgrSwitch labelPosition="before" onChange={onSwitchChangeClick}><span>closeOnOutsideClick</span></IgrSwitch>
-
-            <IgrButton variant="contained" onClick={onDialogShow}>
-                <span>Show Dialog</span>
-            </IgrButton>
-
-            <IgrDialog title="Confirmation" ref={dialog}>
-                <p>Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?</p>
-                <div slot="footer">
-                    <IgrButton onClick={onDialogHide} variant="flat"><span>Cancel</span></IgrButton>
-                    <IgrButton onClick={onDialogHide} variant="flat"><span>OK</span></IgrButton>
-                </div>
-            </IgrDialog>
-        </div>
-    );
-}
-
-// rendering above component to the React DOM
-const root = ReactDOM.createRoot(document.getElementById('root')!);
-root.render(<DialogClosingVariations/>);
diff --git a/samples/notifications/dialog/form/src/index.css b/samples/notifications/dialog/form/src/index.css
deleted file mode 100644
index 1f53b8aa05..0000000000
--- a/samples/notifications/dialog/form/src/index.css
+++ /dev/null
@@ -1,2 +0,0 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
diff --git a/samples/notifications/dialog/form/src/index.tsx b/samples/notifications/dialog/form/src/index.tsx
deleted file mode 100644
index 5d7eb000cc..0000000000
--- a/samples/notifications/dialog/form/src/index.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useRef } from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import { IgrButton, IgrDialog, IgrInput, IgrIcon, registerIconFromText } from 'igniteui-react';
-import 'igniteui-webcomponents/themes/light/bootstrap.css';
-
-const usernameIconText = '<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.71,12.71a6,6,0,1,0-7.42,0,10,10,0,0,0-6.22,8.18,1,1,0,0,0,2,.22,8,8,0,0,1,15.9,0,1,1,0,0,0,1,.89h.11a1,1,0,0,0,.88-1.1A10,10,0,0,0,15.71,12.71ZM12,12a4,4,0,1,1,4-4A4,4,0,0,1,12,12Z"/></svg>';
-const passwordIconText = '<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.0151 13.6556C14.8093 14.3587 16.9279 13.9853 18.3777 12.5355C20.3304 10.5829 20.3304 7.41709 18.3777 5.46447C16.4251 3.51184 13.2593 3.51184 11.3067 5.46447C9.85687 6.91426 9.48353 9.03288 10.1866 10.8271M12.9964 13.6742L6.82843 19.8422L4.2357 19.6065L4 17.0138L10.168 10.8458M15.5493 8.31568V8.29289" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
-
-registerIconFromText("username", usernameIconText, "material");
-registerIconFromText("password", passwordIconText, "material");
-
-export default function DialogForm() {
-    const dialog = useRef<IgrDialog>(null);
-
-    function onDialogShow() {
-        dialog.current?.show();
-    }
-
-    return (
-        <div className="container sample center">
-            <IgrButton variant="contained" onClick={onDialogShow}>
-                <span>Show Dialog</span>
-            </IgrButton>
-
-            <IgrDialog title="Login" ref={dialog}>
-                <form>
-                    <IgrInput label="Username">
-                        <span slot="prefix">
-                            <IgrIcon name="username" collection="material"/>
-                        </span>
-                    </IgrInput>
-                    <br />
-                    <IgrInput type="password" label="Password">
-                        <span slot="prefix">
-                            <IgrIcon name="password" collection="material"/>
-                        </span>
-                    </IgrInput>
-                    <br />
-                    <div style={{display: "flex", justifyContent: "flex-end"}}>
-                        <IgrButton type="reset" variant="flat"><span>Reset</span></IgrButton>
-                        <IgrButton type="submit" variant="flat"><span>Submit</span></IgrButton>
-                    </div>
-                </form>
-
-
-                <div slot="footer">
-                    <IgrButton><span>Create an account</span></IgrButton>
-                </div>
-            </IgrDialog>
-        </div>
-    );
-}
-
-// rendering above component to the React DOM
-const root = ReactDOM.createRoot(document.getElementById('root')!);
-root.render(<DialogForm/>);
diff --git a/samples/notifications/dialog/overview/index.html b/samples/notifications/dialog/overview/index.html
index 8fbce1748d..e9a80bafe2 100644
--- a/samples/notifications/dialog/overview/index.html
+++ b/samples/notifications/dialog/overview/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>DialogOverview</title>
+    <title>Dialog Overview</title>
     <link href="https://dl.infragistics.com/x/css/samples/shared.v8.css" rel="stylesheet" />
   </head>
   <body>
diff --git a/samples/notifications/dialog/overview/package.json b/samples/notifications/dialog/overview/package.json
index 743e36d619..9ac7f1cf5a 100644
--- a/samples/notifications/dialog/overview/package.json
+++ b/samples/notifications/dialog/overview/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dialog-overview",
-  "description": "This project provides example of Dialog Overview using Infragistics React components",
+  "description": "This project provides an example of Dialog overview using Infragistics React components",
   "author": "Infragistics",
   "homepage": ".",
   "version": "1.4.0",
diff --git a/samples/notifications/dialog/overview/src/index.css b/samples/notifications/dialog/overview/src/index.css
index 1f53b8aa05..b215b6c9b9 100644
--- a/samples/notifications/dialog/overview/src/index.css
+++ b/samples/notifications/dialog/overview/src/index.css
@@ -1,2 +1,31 @@
 /* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+.sample {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 1.9375rem 1rem 1rem;
+}
+
+.open-button {
+    width: 11.25rem;
+}
+
+igc-dialog {
+    --ig-dialog-backdrop: transparent;
+    --ig-dialog-message-color: var(--ig-gray-700);
+}
+
+igc-dialog::part(base) {
+    width: 17.5rem;
+    margin-top: 6.9375rem;
+}
+
+igc-dialog igc-button {
+    --ig-size: var(--ig-size-medium);
+}
+
+igc-dialog igc-button::part(base) {
+    min-width: auto;
+}
diff --git a/samples/notifications/dialog/overview/src/index.tsx b/samples/notifications/dialog/overview/src/index.tsx
index 483123d281..cbc70f1e56 100644
--- a/samples/notifications/dialog/overview/src/index.tsx
+++ b/samples/notifications/dialog/overview/src/index.tsx
@@ -5,28 +5,24 @@ import { IgrButton, IgrDialog } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function DialogOverview() {
-    const dialog = useRef<IgrDialog>(null);
+    const dialogRef = useRef<IgrDialog>(null);
 
-    function onDialogShow() {
-        dialog.current?.show();
-    }
-
-    function onDialogHide() {
-        dialog.current?.hide();
-    }
+    const showDialog = () => dialogRef.current?.show();
+    const hideDialog = () => dialogRef.current?.hide();
 
     return (
-        <div className="container sample">
-            <IgrButton variant="contained" onClick={onDialogShow}>
-                <span>Show Dialog</span>
+        <div className="sample">
+            <IgrButton variant="outlined" className="open-button" onClick={showDialog}>
+                <span>Open dialog</span>
             </IgrButton>
-
-            <IgrDialog title="Confirmation" ref={dialog}>
-                <p>Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?</p>
-                <div slot="footer">
-                    <IgrButton onClick={onDialogHide} variant="flat"><span>Cancel</span></IgrButton>
-                    <IgrButton onClick={onDialogHide} variant="flat"><span>OK</span></IgrButton>
-                </div>
+            <IgrDialog ref={dialogRef} title="Confirmation" open>
+                <span slot="message">Your email will be permanently deleted</span>
+                <IgrButton slot="footer" variant="flat" onClick={hideDialog}>
+                    <span>Cancel</span>
+                </IgrButton>
+                <IgrButton slot="footer" variant="flat" onClick={hideDialog}>
+                    <span>OK</span>
+                </IgrButton>
             </IgrDialog>
         </div>
     );
diff --git a/samples/notifications/dialog/styling/index.html b/samples/notifications/dialog/styling/index.html
index f189aa950e..7d677a1e9a 100644
--- a/samples/notifications/dialog/styling/index.html
+++ b/samples/notifications/dialog/styling/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>DialogStyling</title>
+    <title>Dialog Styling</title>
     <link href="https://dl.infragistics.com/x/css/samples/shared.v8.css" rel="stylesheet" />
   </head>
   <body>
diff --git a/samples/notifications/dialog/styling/package.json b/samples/notifications/dialog/styling/package.json
index 05a9f237d8..3eee9f06d1 100644
--- a/samples/notifications/dialog/styling/package.json
+++ b/samples/notifications/dialog/styling/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dialog-styling",
-  "description": "This project provides example of Dialog Styling using Infragistics React components",
+  "description": "This project provides an example of Dialog styling using Infragistics React components",
   "author": "Infragistics",
   "homepage": ".",
   "version": "1.4.0",
diff --git a/samples/notifications/dialog/styling/src/index.css b/samples/notifications/dialog/styling/src/index.css
index fd29928682..4a5af58eab 100644
--- a/samples/notifications/dialog/styling/src/index.css
+++ b/samples/notifications/dialog/styling/src/index.css
@@ -1,13 +1,159 @@
 /* shared styles are loaded from: */
 /* https://dl.infragistics.com/x/css/samples/shared.v8.css */
 
-igc-dialog::part(content) {
-    background: #011627;
-    color: white;
+@import url("https://use.typekit.net/bng2zgw.css");
+@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital@0;1&display=swap");
+
+.sample {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.sign-in-dialog {
+    --ig-dialog-background: #00142b;
+    --ig-dialog-border-radius: 1rem;
+    --ig-dialog-elevation: none;
+    --ig-dialog-title-color: #fcfcfc;
+    --ig-dialog-message-color: #d2dbe8;
+}
+
+.sign-in-dialog::part(base) {
+    position: static;
+    display: block;
+    width: 21.8125rem;
+    margin: 0;
+    border: none;
+}
+
+.sign-in-dialog::part(title) {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    padding: 1.5rem 1.5rem 0;
+    border: none;
+    font: 500 1.25rem / 1.5rem aktiv-grotesk, sans-serif;
+    letter-spacing: 0;
+}
+
+.sign-in-dialog::part(content) {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 0.5rem 1.5rem 1.5rem;
+}
+
+.sign-in-dialog::part(footer) {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1.375rem;
+    padding: 0 1.5rem 1.5rem;
+    border: none;
 }
 
-igc-dialog::part(title),
-igc-dialog::part(footer) {
-    background: #011627;
-    color: #ECAA53;
-}
\ No newline at end of file
+.sign-in-avatar::part(base) {
+    width: 3rem;
+    min-width: 0;
+    height: 3rem;
+    padding: 0;
+    border: none;
+    border-radius: 0.75rem;
+    background: #5a1f0c;
+    box-shadow: var(--ig-elevation-6);
+}
+
+.sign-in-avatar igc-icon {
+    --ig-icon-size: 1.125rem;
+
+    color: #f95924;
+}
+
+.sign-in-title {
+    margin: 0;
+}
+
+.sign-in-message {
+    margin-bottom: 0.375rem;
+    font: 600 0.75rem / 1rem aktiv-grotesk, sans-serif;
+    letter-spacing: 0.15px;
+}
+
+.sign-in-input {
+    --ig-size: var(--ig-size-small);
+    --ig-font-family: "Nunito Sans", sans-serif;
+    --ig-input-group-idle-text-color: #fcfcfc;
+    --ig-input-group-filled-text-color: #fcfcfc;
+    --ig-input-group-filled-text-hover-color: #fcfcfc;
+    --ig-input-group-focused-text-color: #fcfcfc;
+    --ig-input-group-placeholder-color: #a9b8cc;
+    --ig-input-group-hover-placeholder-color: #d2dbe8;
+    --ig-input-group-idle-secondary-color: #a9b8cc;
+    --ig-input-group-focused-secondary-color: #a9b8cc;
+    --ig-input-group-input-prefix-color: #7d91ab;
+    --ig-input-group-input-prefix-color--filled: #7d91ab;
+    --ig-input-group-input-prefix-color--focused: #7d91ab;
+    --ig-input-group-idle-bottom-line-color: rgb(255 255 255 / 40%);
+    --ig-input-group-hover-bottom-line-color: rgb(255 255 255 / 80%);
+    --ig-input-group-focused-bottom-line-color: #f95924;
+}
+
+.sign-in-input::part(label) {
+    font-size: 0.6875rem;
+    line-height: 0.9375rem;
+    letter-spacing: 0;
+}
+
+.sign-in-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.sign-in-actions igc-button {
+    flex: 1;
+}
+
+.sign-in-actions igc-button::part(base) {
+    height: 1.875rem;
+    border-radius: 0.5rem;
+    font: 600 0.75rem / 1rem aktiv-grotesk, sans-serif;
+    letter-spacing: 0.15px;
+    text-transform: none;
+}
+
+.cancel-button {
+    --ig-outlined-button-hover-background: rgb(125 145 171 / 8%);
+    --ig-outlined-button-focus-hover-background: rgb(125 145 171 / 8%);
+    --ig-outlined-button-active-background: rgb(125 145 171 / 16%);
+    --ig-outlined-button-focus-background: rgb(125 145 171 / 16%);
+    --ig-outlined-button-focus-visible-background: rgb(125 145 171 / 16%);
+}
+
+.cancel-button::part(base) {
+    border-color: #7d91ab;
+    color: #7d91ab;
+}
+
+.submit-button::part(base) {
+    background: #f95924;
+    color: #00142b;
+    box-shadow: none;
+}
+
+.submit-button:hover::part(base) {
+    background: #e04f20;
+}
+
+.sign-up {
+    font: 400 0.625rem / 1rem aktiv-grotesk, sans-serif;
+    letter-spacing: 1.5px;
+    text-transform: uppercase;
+    text-align: center;
+    color: #a9b8cc;
+}
+
+.sign-up a {
+    color: #f95924;
+    text-decoration: none;
+}
diff --git a/samples/notifications/dialog/styling/src/index.tsx b/samples/notifications/dialog/styling/src/index.tsx
index f0d108fbc0..696d3bb352 100644
--- a/samples/notifications/dialog/styling/src/index.tsx
+++ b/samples/notifications/dialog/styling/src/index.tsx
@@ -1,33 +1,47 @@
-import { useRef } from 'react';
+import { useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import { IgrButton, IgrDialog } from 'igniteui-react';
+import { IgrButton, IgrDialog, IgrIcon, IgrInput, IgrThemeProvider, registerIconFromText } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
-export default function DialogStyling() {
-    const dialog = useRef<IgrDialog>(null);
-
-    function onDialogShow() {
-        dialog.current?.show();
-    }
+const personIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M9 9C10.6575 9 12 7.6575 12 6C12 4.3425 10.6575 3 9 3C7.3425 3 6 4.3425 6 6C6 7.6575 7.3425 9 9 9ZM9 10.5C6.9975 10.5 3 11.505 3 13.5V15H15V13.5C15 11.505 11.0025 10.5 9 10.5Z"/></svg>';
+const notificationsIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 12.5417C7.64167 12.5417 8.16667 12.0167 8.16667 11.375H5.83333C5.83333 12.0167 6.3525 12.5417 7 12.5417ZM10.5 9.04167V6.125C10.5 4.33417 9.54333 2.835 7.875 2.43833V2.04167C7.875 1.5575 7.48417 1.16667 7 1.16667C6.51583 1.16667 6.125 1.5575 6.125 2.04167V2.43833C4.45083 2.835 3.5 4.32833 3.5 6.125V9.04167L2.33333 10.2083V10.7917H11.6667V10.2083L10.5 9.04167Z"/></svg>';
+const lockIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 5.25H9.91667V4.08333C9.91667 2.47333 8.61 1.16667 7 1.16667C5.39 1.16667 4.08333 2.47333 4.08333 4.08333V5.25H3.5C2.85833 5.25 2.33333 5.775 2.33333 6.41667V12.25C2.33333 12.8917 2.85833 13.4167 3.5 13.4167H10.5C11.1417 13.4167 11.6667 12.8917 11.6667 12.25V6.41667C11.6667 5.775 11.1417 5.25 10.5 5.25ZM7 10.5C6.35833 10.5 5.83333 9.975 5.83333 9.33333C5.83333 8.69167 6.35833 8.16667 7 8.16667C7.64167 8.16667 8.16667 8.69167 8.16667 9.33333C8.16667 9.975 7.64167 10.5 7 10.5ZM8.80828 5.25023H5.19161V4.08356C5.19161 3.08606 6.00244 2.27523 6.99994 2.27523C7.99744 2.27523 8.80828 3.08606 8.80828 4.08356V5.25023Z"/></svg>';
 
-    function onDialogHide() {
-        dialog.current?.hide();
-    }
+export default function DialogStyling() {
+    useEffect(() => {
+        registerIconFromText('person', personIcon, 'material');
+        registerIconFromText('notifications', notificationsIcon, 'material');
+        registerIconFromText('lock', lockIcon, 'material');
+    }, []);
 
     return (
-        <div className="container sample center">
-            <IgrButton variant="contained" onClick={onDialogShow}>
-                <span>Show Dialog</span>
-            </IgrButton>
-
-            <IgrDialog title="Confirmation" ref={dialog}>
-                <h1 slot="title">Styled Title</h1>
-                <p>Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?</p>
-                <div slot="footer">
-                    <IgrButton onClick={onDialogHide} variant="flat"><span>Cancel</span></IgrButton>
-                    <IgrButton onClick={onDialogHide} variant="flat"><span>OK</span></IgrButton>
+        <div className="sample">
+            <IgrDialog className="sign-in-dialog">
+                <IgrButton slot="title" variant="fab" className="sign-in-avatar" aria-label="Profile">
+                    <IgrIcon name="person" collection="material" />
+                </IgrButton>
+                <span slot="title" className="sign-in-title">Welcome back</span>
+                <span slot="message" className="sign-in-message">Sign in to your workspace</span>
+                <IgrThemeProvider theme="indigo" variant="dark">
+                    <IgrInput className="sign-in-input" label="E-mail" type="email" placeholder="dean@company.com">
+                        <IgrIcon slot="prefix" name="notifications" collection="material" />
+                    </IgrInput>
+                    <IgrInput className="sign-in-input" label="Password" type="password" placeholder="***********">
+                        <IgrIcon slot="prefix" name="lock" collection="material" />
+                    </IgrInput>
+                </IgrThemeProvider>
+                <div slot="footer" className="sign-in-actions">
+                    <IgrButton variant="outlined" className="cancel-button">
+                        <span>Cancel</span>
+                    </IgrButton>
+                    <IgrButton variant="contained" className="submit-button">
+                        <span>Sign in</span>
+                    </IgrButton>
                 </div>
+                <span slot="footer" className="sign-up">
+                    No account? <a href="#">Create workspace</a>
+                </span>
             </IgrDialog>
         </div>
     );
diff --git a/samples/notifications/dialog/closing-variations/README.md b/samples/notifications/dialog/tailwind-styling/README.md
similarity index 85%
rename from samples/notifications/dialog/closing-variations/README.md
rename to samples/notifications/dialog/tailwind-styling/README.md
index 7cba0e12a3..a475a8dac3 100644
--- a/samples/notifications/dialog/closing-variations/README.md
+++ b/samples/notifications/dialog/tailwind-styling/README.md
@@ -1,4 +1,4 @@
-This folder contains implementation of React application with example of Closing Variations feature using [Dialog](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+This folder contains implementation of React application with example of Tailwind Styling feature using [Dialog](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
 
 
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
@@ -9,7 +9,7 @@ This folder contains implementation of React application with example of Closing
         <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
             <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://dl.infragistics.com/x/img/browsers/button-code.png"/>
         </a>
-        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/notifications/dialog/closing-variations" rel="noopener noreferrer">
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/notifications/dialog/tailwind-styling" rel="noopener noreferrer">
             <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-run.png"/>
         </a>
     </body>
@@ -28,7 +28,7 @@ Follow these instructions to run this example:
 git clone https://github.com/IgniteUI/igniteui-react-examples.git
 cd ./igniteui-react-examples
 git checkout master
-cd ./samples/notifications/dialog/closing-variations
+cd ./samples/notifications/dialog/tailwind-styling
 ```
 
 open above folder in VS Code or type:
diff --git a/samples/notifications/dialog/closing-variations/index.html b/samples/notifications/dialog/tailwind-styling/index.html
similarity index 85%
rename from samples/notifications/dialog/closing-variations/index.html
rename to samples/notifications/dialog/tailwind-styling/index.html
index a2fdfc66e0..21b24e8f5e 100644
--- a/samples/notifications/dialog/closing-variations/index.html
+++ b/samples/notifications/dialog/tailwind-styling/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>DialogClosingVariations</title>
+    <title>Dialog Tailwind Styling</title>
     <link href="https://dl.infragistics.com/x/css/samples/shared.v8.css" rel="stylesheet" />
   </head>
   <body>
diff --git a/samples/notifications/dialog/closing-variations/package.json b/samples/notifications/dialog/tailwind-styling/package.json
similarity index 81%
rename from samples/notifications/dialog/closing-variations/package.json
rename to samples/notifications/dialog/tailwind-styling/package.json
index 15ec33ce25..2455854202 100644
--- a/samples/notifications/dialog/closing-variations/package.json
+++ b/samples/notifications/dialog/tailwind-styling/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "react-dialog-closing-variations",
-  "description": "This project provides example of Dialog Closing Variations using Infragistics React components",
+  "name": "react-dialog-tailwind-styling",
+  "description": "This project provides an example of Dialog tailwind styling using Infragistics React components",
   "author": "Infragistics",
   "homepage": ".",
   "version": "1.4.0",
@@ -21,12 +21,14 @@
     "tslib": "^2.4.0"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.3.3",
     "@types/jest": "^30.0.0",
     "@types/node": "^24.7.1",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^6.1.1",
     "@vitest/browser": "^5.0.2",
+    "tailwindcss": "^4.3.3",
     "typescript": "^5.9.3",
     "vite": "^8.3.1",
     "vitest": "^5.0.2",
diff --git a/samples/notifications/dialog/tailwind-styling/src/index.css b/samples/notifications/dialog/tailwind-styling/src/index.css
new file mode 100644
index 0000000000..cbca433d0d
--- /dev/null
+++ b/samples/notifications/dialog/tailwind-styling/src/index.css
@@ -0,0 +1,20 @@
+/* shared styles are loaded from: */
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+@layer theme, base, components, utilities;
+@import url("https://use.typekit.net/bng2zgw.css");
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+@source "./index.tsx";
+
+@theme {
+    --color-export-surface: #002b5c;
+    --color-export-ink: #fcfcfc;
+    --color-export-muted: #a9b8cc;
+    --color-export-accent: #f95924;
+    --color-export-accent-hover: #e04f20;
+    --color-invite-surface: #e6f2ff;
+    --color-invite-border: #99c9ff;
+    --color-invite-ink: #004699;
+    --color-invite-link: #0176ff;
+}
diff --git a/samples/notifications/dialog/tailwind-styling/src/index.tsx b/samples/notifications/dialog/tailwind-styling/src/index.tsx
new file mode 100644
index 0000000000..57de42701c
--- /dev/null
+++ b/samples/notifications/dialog/tailwind-styling/src/index.tsx
@@ -0,0 +1,56 @@
+import { useEffect } from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { IgrButton, IgrDialog, IgrIconButton, registerIconFromText } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+const clearIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.25 4.8075L13.1925 3.75L9 7.9425L4.8075 3.75L3.75 4.8075L7.9425 9L3.75 13.1925L4.8075 14.25L9 10.0575L13.1925 14.25L14.25 13.1925L10.0575 9L14.25 4.8075Z"/></svg>';
+
+export default function DialogTailwindStyling() {
+    useEffect(() => {
+        registerIconFromText('clear', clearIcon, 'material');
+    }, []);
+
+    return (
+        <div className="sample flex items-center justify-center">
+            <div className="flex items-start gap-15 [--ig-font-family:aktiv-grotesk,sans-serif]">
+                <IgrDialog className="[--ig-dialog-background:var(--color-export-surface)] [--ig-dialog-border-color:transparent] [--ig-dialog-border-radius:1rem] [--ig-dialog-elevation:none] [--ig-dialog-message-color:var(--color-export-muted)] [--ig-dialog-title-color:var(--color-export-ink)] [&::part(base)]:static [&::part(base)]:m-0 [&::part(base)]:block [&::part(base)]:w-70 [&::part(base)]:min-w-0 [&::part(base)]:border-0 [&::part(content)]:px-6 [&::part(content)]:py-3.5 [&::part(content)]:text-xs/4 [&::part(content)]:font-semibold [&::part(content)]:tracking-[0.15px] [&::part(footer)]:pt-0 [&::part(footer)]:pr-6 [&::part(footer)]:pb-6 [&::part(footer)]:pl-2 [&::part(footer)]:border-0 [&::part(title)]:px-6 [&::part(title)]:pt-4 [&::part(title)]:pb-0 [&::part(title)]:border-0 [&::part(title)]:text-base/5 [&::part(title)]:font-bold [&::part(title)]:tracking-normal">
+                    <span slot="title">Export complete</span>
+                    <span slot="message">
+                        analytics_report_Q3.csv
+                        <br />
+                        has been exported to your Downloads folder.
+                    </span>
+                    <IgrButton
+                        slot="footer"
+                        variant="contained"
+                        className="[&::part(base)]:h-7.5 [&::part(base)]:w-[4.0625rem] [&::part(base)]:min-w-0 [&::part(base)]:rounded-lg [&::part(base)]:bg-export-accent [&::part(base)]:px-2 [&::part(base)]:text-xs/4 [&::part(base)]:font-semibold [&::part(base)]:tracking-[0.15px] [&::part(base)]:text-black [&::part(base)]:normal-case [&::part(base)]:shadow-[var(--ig-elevation-2)] hover:[&::part(base)]:bg-export-accent-hover"
+                    >
+                        <span>Got it</span>
+                    </IgrButton>
+                </IgrDialog>
+                <IgrDialog
+                    hideDefaultAction
+                    className="[--ig-dialog-background:var(--color-invite-surface)] [--ig-dialog-border-color:var(--color-invite-border)] [--ig-dialog-border-radius:0.5rem] [--ig-dialog-elevation:none] [--ig-dialog-message-color:var(--color-invite-ink)] [--ig-dialog-title-color:var(--color-invite-ink)] [&::part(base)]:static [&::part(base)]:m-0 [&::part(base)]:block [&::part(base)]:w-[15.5625rem] [&::part(base)]:min-w-0 [&::part(content)]:px-6 [&::part(content)]:py-3.5 [&::part(content)]:text-xs/4 [&::part(content)]:font-semibold [&::part(content)]:tracking-[0.15px] [&::part(title)]:justify-between [&::part(title)]:px-6 [&::part(title)]:pt-4 [&::part(title)]:pb-0 [&::part(title)]:border-0 [&::part(title)]:text-base/5 [&::part(title)]:font-bold [&::part(title)]:tracking-normal"
+                >
+                    <span slot="title">Invitation sent</span>
+                    <IgrIconButton
+                        slot="title"
+                        variant="outlined"
+                        name="clear"
+                        collection="material"
+                        aria-label="Close"
+                        className="[&::part(base)]:size-6 [&::part(base)]:p-0 [&::part(base)]:rounded-full [&::part(base)]:border [&::part(base)]:border-invite-ink [--ig-outlined-icon-button-foreground:var(--color-invite-ink)]"
+                    />
+                    <span slot="message">
+                        <span className="text-invite-link">john.smith@company.com</span> has been invited to your team.
+                    </span>
+                </IgrDialog>
+            </div>
+        </div>
+    );
+}
+
+// rendering above component to the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(<DialogTailwindStyling/>);
diff --git a/samples/notifications/dialog/closing-variations/tsconfig.json b/samples/notifications/dialog/tailwind-styling/tsconfig.json
similarity index 100%
rename from samples/notifications/dialog/closing-variations/tsconfig.json
rename to samples/notifications/dialog/tailwind-styling/tsconfig.json
diff --git a/samples/notifications/dialog/form/vite.config.js b/samples/notifications/dialog/tailwind-styling/vite.config.js
similarity index 53%
rename from samples/notifications/dialog/form/vite.config.js
rename to samples/notifications/dialog/tailwind-styling/vite.config.js
index 1744dbc719..4043727956 100644
--- a/samples/notifications/dialog/form/vite.config.js
+++ b/samples/notifications/dialog/tailwind-styling/vite.config.js
@@ -1,12 +1,13 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
   build: {
-    outDir: 'build'
+    outDir: 'build',
   },
   server: {
-    open: false
+    open: false,
   },
-});
\ No newline at end of file
+});
diff --git a/samples/notifications/dialog/form/README.md b/samples/notifications/dialog/types/README.md
similarity index 87%
rename from samples/notifications/dialog/form/README.md
rename to samples/notifications/dialog/types/README.md
index 974e3ae85a..fee9f468ee 100644
--- a/samples/notifications/dialog/form/README.md
+++ b/samples/notifications/dialog/types/README.md
@@ -1,4 +1,4 @@
-This folder contains implementation of React application with example of Form feature using [Dialog](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+This folder contains implementation of React application with example of Types feature using [Dialog](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
 
 
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
@@ -9,7 +9,7 @@ This folder contains implementation of React application with example of Form fe
         <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
             <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://dl.infragistics.com/x/img/browsers/button-code.png"/>
         </a>
-        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/notifications/dialog/form" rel="noopener noreferrer">
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/notifications/dialog/types" rel="noopener noreferrer">
             <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-run.png"/>
         </a>
     </body>
@@ -28,7 +28,7 @@ Follow these instructions to run this example:
 git clone https://github.com/IgniteUI/igniteui-react-examples.git
 cd ./igniteui-react-examples
 git checkout master
-cd ./samples/notifications/dialog/form
+cd ./samples/notifications/dialog/types
 ```
 
 open above folder in VS Code or type:
diff --git a/samples/notifications/dialog/form/index.html b/samples/notifications/dialog/types/index.html
similarity index 88%
rename from samples/notifications/dialog/form/index.html
rename to samples/notifications/dialog/types/index.html
index a5e3d1052b..859ede2923 100644
--- a/samples/notifications/dialog/form/index.html
+++ b/samples/notifications/dialog/types/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>DialogForm</title>
+    <title>Dialog Types</title>
     <link href="https://dl.infragistics.com/x/css/samples/shared.v8.css" rel="stylesheet" />
   </head>
   <body>
diff --git a/samples/notifications/dialog/form/package.json b/samples/notifications/dialog/types/package.json
similarity index 87%
rename from samples/notifications/dialog/form/package.json
rename to samples/notifications/dialog/types/package.json
index 2055bdc4e1..0c3e2f2f67 100644
--- a/samples/notifications/dialog/form/package.json
+++ b/samples/notifications/dialog/types/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "react-dialog-form",
-  "description": "This project provides example of Dialog Form using Infragistics React components",
+  "name": "react-dialog-types",
+  "description": "This project provides an example of Dialog types using Infragistics React components",
   "author": "Infragistics",
   "homepage": ".",
   "version": "1.4.0",
diff --git a/samples/notifications/dialog/types/src/index.css b/samples/notifications/dialog/types/src/index.css
new file mode 100644
index 0000000000..e36f0d7f37
--- /dev/null
+++ b/samples/notifications/dialog/types/src/index.css
@@ -0,0 +1,48 @@
+/* shared styles are loaded from: */
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+.sample {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.dialog-types {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 3.75rem;
+    width: 100%;
+}
+
+.dialog-types igc-dialog {
+    --ig-dialog-message-color: var(--ig-gray-700);
+}
+
+.dialog-types igc-dialog::part(base) {
+    position: static;
+    display: block;
+    flex: 0 1 17.5rem;
+    min-width: 0;
+    margin: 0;
+}
+
+.dialog-types igc-button {
+    --ig-size: var(--ig-size-medium);
+}
+
+.dialog-types igc-button::part(base) {
+    min-width: auto;
+}
+
+.sign-in-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.75rem;
+}
+
+.sign-in-form igc-input {
+    --ig-size: var(--ig-size-small);
+}
diff --git a/samples/notifications/dialog/types/src/index.tsx b/samples/notifications/dialog/types/src/index.tsx
new file mode 100644
index 0000000000..3820cfffd6
--- /dev/null
+++ b/samples/notifications/dialog/types/src/index.tsx
@@ -0,0 +1,57 @@
+import { useEffect } from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { IgrButton, IgrDialog, IgrIcon, IgrInput, registerIconFromText } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+const accountCircleIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 1.5C4.86 1.5 1.5 4.86 1.5 9C1.5 13.14 4.86 16.5 9 16.5C13.14 16.5 16.5 13.14 16.5 9C16.5 4.86 13.14 1.5 9 1.5ZM9 3.75C10.245 3.75 11.25 4.755 11.25 6C11.25 7.245 10.245 8.25 9 8.25C7.755 8.25 6.75 7.245 6.75 6C6.75 4.755 7.755 3.75 9 3.75ZM9 14.4003C7.125 14.4003 5.4675 13.4403 4.5 11.9853C4.5225 10.4928 7.5 9.67529 9 9.67529C10.4925 9.67529 13.4775 10.4928 13.5 11.9853C12.5325 13.4403 10.875 14.4003 9 14.4003Z"/></svg>';
+const lockIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 6.75H12.75V5.25C12.75 3.18 11.07 1.5 9 1.5C6.93 1.5 5.25 3.18 5.25 5.25V6.75H4.5C3.675 6.75 3 7.425 3 8.25V15.75C3 16.575 3.675 17.25 4.5 17.25H13.5C14.325 17.25 15 16.575 15 15.75V8.25C15 7.425 14.325 6.75 13.5 6.75ZM9 13.5C8.175 13.5 7.5 12.825 7.5 12C7.5 11.175 8.175 10.5 9 10.5C9.825 10.5 10.5 11.175 10.5 12C10.5 12.825 9.825 13.5 9 13.5ZM11.3249 6.75029H6.67493V5.25029C6.67493 3.96779 7.71743 2.92529 8.99993 2.92529C10.2824 2.92529 11.3249 3.96779 11.3249 5.25029V6.75029Z"/></svg>';
+
+export default function DialogTypes() {
+    useEffect(() => {
+        registerIconFromText('account_circle', accountCircleIcon, 'material');
+        registerIconFromText('lock', lockIcon, 'material');
+    }, []);
+
+    return (
+        <div className="sample">
+            <div className="dialog-types">
+                <IgrDialog title="Notification">
+                    <span slot="message">Your email has been sent successfully!</span>
+                    <IgrButton slot="footer" variant="flat">
+                        <span>OK</span>
+                    </IgrButton>
+                </IgrDialog>
+                <IgrDialog title="Confirmation">
+                    <span slot="message">Your email will be permanently deleted</span>
+                    <IgrButton slot="footer" variant="flat">
+                        <span>Cancel</span>
+                    </IgrButton>
+                    <IgrButton slot="footer" variant="flat">
+                        <span>OK</span>
+                    </IgrButton>
+                </IgrDialog>
+                <IgrDialog title="Sign In">
+                    <div className="sign-in-form">
+                        <IgrInput label="Username" value="DeanG" outlined>
+                            <IgrIcon slot="prefix" name="account_circle" collection="material" />
+                        </IgrInput>
+                        <IgrInput label="Password" type="password" value="password123" outlined>
+                            <IgrIcon slot="prefix" name="lock" collection="material" />
+                        </IgrInput>
+                    </div>
+                    <IgrButton slot="footer" variant="flat">
+                        <span>Cancel</span>
+                    </IgrButton>
+                    <IgrButton slot="footer" variant="flat">
+                        <span>Sign In</span>
+                    </IgrButton>
+                </IgrDialog>
+            </div>
+        </div>
+    );
+}
+
+// rendering above component to the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(<DialogTypes/>);
diff --git a/samples/notifications/dialog/form/tsconfig.json b/samples/notifications/dialog/types/tsconfig.json
similarity index 100%
rename from samples/notifications/dialog/form/tsconfig.json
rename to samples/notifications/dialog/types/tsconfig.json
diff --git a/samples/notifications/dialog/closing-variations/vite.config.js b/samples/notifications/dialog/types/vite.config.js
similarity index 100%
rename from samples/notifications/dialog/closing-variations/vite.config.js
rename to samples/notifications/dialog/types/vite.config.js