diff --git a/src/dialog/__test__/__snapshots__/demo.test.jsx.snap b/src/dialog/__test__/__snapshots__/demo.test.jsx.snap
index 298d84ea2..858168621 100644
--- a/src/dialog/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/dialog/__test__/__snapshots__/demo.test.jsx.snap
@@ -38,11 +38,10 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
       <!--v-if-->
       
       <div
-        class="t-dialog"
+        class="t-dialog "
       >
-        
-        
-        <!--v-if-->
+        <!---->
+        <!---->
         <div
           class="t-dialog__content"
         >
@@ -61,15 +60,11 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
             </div>
           </div>
         </div>
-        
-        
+        <!---->
         <div
           class="t-dialog__footer"
         >
-          
-          <!--v-if-->
-          
-          
+          <!---->
           <button
             aria-disabled="false"
             class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
@@ -84,8 +79,6 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
             </span>
             <!---->
           </button>
-          
-          
           <button
             aria-disabled="false"
             class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
@@ -100,7 +93,6 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
             </span>
             <!---->
           </button>
-          
         </div>
       </div>
       
@@ -142,15 +134,14 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
       <!--v-if-->
       
       <div
-        class="t-dialog"
+        class="t-dialog "
       >
-        
-        
-        <!--v-if-->
+        <!---->
+        <!---->
         <div
           class="t-dialog__content"
         >
-          <!--v-if-->
+          <!---->
           <div
             class="t-dialog__body"
           >
@@ -161,15 +152,11 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
             </div>
           </div>
         </div>
-        
-        
+        <!---->
         <div
           class="t-dialog__footer"
         >
-          
-          <!--v-if-->
-          
-          
+          <!---->
           <button
             aria-disabled="false"
             class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
@@ -184,8 +171,6 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
             </span>
             <!---->
           </button>
-          
-          
           <button
             aria-disabled="false"
             class="t-button t-button--size-medium t-button--base t-button--danger t-button--rectangle t-dialog__button t-dialog__button--horizontal"
@@ -200,7 +185,6 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
             </span>
             <!---->
           </button>
-          
         </div>
       </div>
       
@@ -248,11 +232,10 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
       <!--v-if-->
       
       <div
-        class="t-dialog"
+        class="t-dialog "
       >
-        
-        
-        <!--v-if-->
+        <!---->
+        <!---->
         <div
           class="t-dialog__content"
         >
@@ -271,18 +254,12 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
             </div>
           </div>
         </div>
-        
-        
+        <!---->
         <div
           class="t-dialog__footer"
         >
-          
-          <!--v-if-->
-          
-          
-          <!--v-if-->
-          
-          
+          <!---->
+          <!---->
           <button
             aria-disabled="false"
             class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
@@ -297,7 +274,6 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
             </span>
             <!---->
           </button>
-          
         </div>
       </div>
       
@@ -339,15 +315,14 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
       <!--v-if-->
       
       <div
-        class="t-dialog"
+        class="t-dialog "
       >
-        
-        
-        <!--v-if-->
+        <!---->
+        <!---->
         <div
           class="t-dialog__content"
         >
-          <!--v-if-->
+          <!---->
           <div
             class="t-dialog__body"
           >
@@ -358,18 +333,12 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
             </div>
           </div>
         </div>
-        
-        
+        <!---->
         <div
           class="t-dialog__footer"
         >
-          
-          <!--v-if-->
-          
-          
-          <!--v-if-->
-          
-          
+          <!---->
+          <!---->
           <button
             aria-disabled="false"
             class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
@@ -384,7 +353,6 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
             </span>
             <!---->
           </button>
-          
         </div>
       </div>
       
@@ -426,11 +394,10 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
       <!--v-if-->
       
       <div
-        class="t-dialog"
+        class="t-dialog "
       >
-        
-        
-        <!--v-if-->
+        <!---->
+        <!---->
         <div
           class="t-dialog__content"
         >
@@ -451,18 +418,12 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
             </div>
           </div>
         </div>
-        
-        
+        <!---->
         <div
           class="t-dialog__footer"
         >
-          
-          <!--v-if-->
-          
-          
-          <!--v-if-->
-          
-          
+          <!---->
+          <!---->
           <button
             aria-disabled="false"
             class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
@@ -477,7 +438,6 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
             </span>
             <!---->
           </button>
-          
         </div>
       </div>
       
@@ -527,7 +487,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
       <!--v-if-->
       
       <div
-        class="t-dialog"
+        class="t-dialog "
       >
         
         <div
@@ -575,7 +535,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
           </picture>
         </div>
         
-        <!--v-if-->
+        <!---->
         <div
           class="t-dialog__content"
         >
@@ -594,15 +554,11 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
             </div>
           </div>
         </div>
-        
-        
+        <!---->
         <div
           class="t-dialog__footer"
         >
-          
-          <!--v-if-->
-          
-          
+          <!---->
           <button
             aria-disabled="false"
             class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
@@ -617,8 +573,6 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
             </span>
             <!---->
           </button>
-          
-          
           <button
             aria-disabled="false"
             class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
@@ -633,7 +587,6 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
             </span>
             <!---->
           </button>
-          
         </div>
       </div>
       
@@ -678,11 +631,10 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
       <!--v-if-->
       
       <div
-        class="t-dialog"
+        class="t-dialog "
       >
-        
-        
-        <!--v-if-->
+        <!---->
+        <!---->
         <div
           class="t-dialog__content"
         >
@@ -750,10 +702,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
         <div
           class="t-dialog__footer"
         >
-          
-          <!--v-if-->
-          
-          
+          <!---->
           <button
             aria-disabled="false"
             class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
@@ -768,8 +717,6 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
             </span>
             <!---->
           </button>
-          
-          
           <button
             aria-disabled="false"
             class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
@@ -784,7 +731,6 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
             </span>
             <!---->
           </button>
-          
         </div>
       </div>
       
@@ -834,11 +780,10 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
       <!--v-if-->
       
       <div
-        class="t-dialog"
+        class="t-dialog "
       >
-        
-        
-        <!--v-if-->
+        <!---->
+        <!---->
         <div
           class="t-dialog__content"
         >
@@ -893,15 +838,11 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
             </div>
           </div>
         </div>
-        
-        
+        <!---->
         <div
           class="t-dialog__footer t-dialog__footer--full"
         >
-          
-          <!--v-if-->
-          
-          
+          <!---->
           <button
             aria-disabled="false"
             class="t-button t-button--size-large t-button--text t-button--default t-button--rectangle t-dialog__button t-dialog__button--text"
@@ -916,8 +857,6 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
             </span>
             <!---->
           </button>
-          
-          
           <button
             aria-disabled="false"
             class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle t-dialog__button t-dialog__button--text"
@@ -932,7 +871,6 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
             </span>
             <!---->
           </button>
-          
         </div>
       </div>
       
@@ -977,11 +915,10 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
       <!--v-if-->
       
       <div
-        class="t-dialog"
+        class="t-dialog "
       >
-        
-        
-        <!--v-if-->
+        <!---->
+        <!---->
         <div
           class="t-dialog__content"
         >
@@ -1041,15 +978,11 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
             </div>
           </div>
         </div>
-        
-        
+        <!---->
         <div
           class="t-dialog__footer t-dialog__footer--full"
         >
-          
-          <!--v-if-->
-          
-          
+          <!---->
           <button
             aria-disabled="false"
             class="t-button t-button--size-large t-button--text t-button--default t-button--rectangle t-dialog__button t-dialog__button--text"
@@ -1064,8 +997,6 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
             </span>
             <!---->
           </button>
-          
-          
           <button
             aria-disabled="false"
             class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle t-dialog__button t-dialog__button--text"
@@ -1080,7 +1011,6 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
             </span>
             <!---->
           </button>
-          
         </div>
       </div>
       
@@ -1159,11 +1089,10 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           <!--v-if-->
           
           <div
-            class="t-dialog"
+            class="t-dialog "
           >
-            
-            
-            <!--v-if-->
+            <!---->
+            <!---->
             <div
               class="t-dialog__content"
             >
@@ -1182,18 +1111,12 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </div>
               </div>
             </div>
-            
-            
+            <!---->
             <div
               class="t-dialog__footer"
             >
-              
-              <!--v-if-->
-              
-              
-              <!--v-if-->
-              
-              
+              <!---->
+              <!---->
               <button
                 aria-disabled="false"
                 class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
@@ -1208,7 +1131,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </span>
                 <!---->
               </button>
-              
             </div>
           </div>
           
@@ -1250,15 +1172,14 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           <!--v-if-->
           
           <div
-            class="t-dialog"
+            class="t-dialog "
           >
-            
-            
-            <!--v-if-->
+            <!---->
+            <!---->
             <div
               class="t-dialog__content"
             >
-              <!--v-if-->
+              <!---->
               <div
                 class="t-dialog__body"
               >
@@ -1269,18 +1190,12 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </div>
               </div>
             </div>
-            
-            
+            <!---->
             <div
               class="t-dialog__footer"
             >
-              
-              <!--v-if-->
-              
-              
-              <!--v-if-->
-              
-              
+              <!---->
+              <!---->
               <button
                 aria-disabled="false"
                 class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
@@ -1295,7 +1210,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </span>
                 <!---->
               </button>
-              
             </div>
           </div>
           
@@ -1337,11 +1251,10 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           <!--v-if-->
           
           <div
-            class="t-dialog"
+            class="t-dialog "
           >
-            
-            
-            <!--v-if-->
+            <!---->
+            <!---->
             <div
               class="t-dialog__content"
             >
@@ -1362,18 +1275,12 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </div>
               </div>
             </div>
-            
-            
+            <!---->
             <div
               class="t-dialog__footer"
             >
-              
-              <!--v-if-->
-              
-              
-              <!--v-if-->
-              
-              
+              <!---->
+              <!---->
               <button
                 aria-disabled="false"
                 class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
@@ -1388,7 +1295,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </span>
                 <!---->
               </button>
-              
             </div>
           </div>
           
@@ -1449,11 +1355,10 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           <!--v-if-->
           
           <div
-            class="t-dialog"
+            class="t-dialog "
           >
-            
-            
-            <!--v-if-->
+            <!---->
+            <!---->
             <div
               class="t-dialog__content"
             >
@@ -1472,15 +1377,11 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </div>
               </div>
             </div>
-            
-            
+            <!---->
             <div
               class="t-dialog__footer"
             >
-              
-              <!--v-if-->
-              
-              
+              <!---->
               <button
                 aria-disabled="false"
                 class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
@@ -1495,8 +1396,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </span>
                 <!---->
               </button>
-              
-              
               <button
                 aria-disabled="false"
                 class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
@@ -1511,7 +1410,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </span>
                 <!---->
               </button>
-              
             </div>
           </div>
           
@@ -1553,15 +1451,14 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           <!--v-if-->
           
           <div
-            class="t-dialog"
+            class="t-dialog "
           >
-            
-            
-            <!--v-if-->
+            <!---->
+            <!---->
             <div
               class="t-dialog__content"
             >
-              <!--v-if-->
+              <!---->
               <div
                 class="t-dialog__body"
               >
@@ -1572,15 +1469,11 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </div>
               </div>
             </div>
-            
-            
+            <!---->
             <div
               class="t-dialog__footer"
             >
-              
-              <!--v-if-->
-              
-              
+              <!---->
               <button
                 aria-disabled="false"
                 class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
@@ -1595,8 +1488,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </span>
                 <!---->
               </button>
-              
-              
               <button
                 aria-disabled="false"
                 class="t-button t-button--size-medium t-button--base t-button--danger t-button--rectangle t-dialog__button t-dialog__button--horizontal"
@@ -1611,7 +1502,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </span>
                 <!---->
               </button>
-              
             </div>
           </div>
           
@@ -1674,11 +1564,10 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           <!--v-if-->
           
           <div
-            class="t-dialog"
+            class="t-dialog "
           >
-            
-            
-            <!--v-if-->
+            <!---->
+            <!---->
             <div
               class="t-dialog__content"
             >
@@ -1733,15 +1622,11 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </div>
               </div>
             </div>
-            
-            
+            <!---->
             <div
               class="t-dialog__footer t-dialog__footer--full"
             >
-              
-              <!--v-if-->
-              
-              
+              <!---->
               <button
                 aria-disabled="false"
                 class="t-button t-button--size-large t-button--text t-button--default t-button--rectangle t-dialog__button t-dialog__button--text"
@@ -1756,8 +1641,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </span>
                 <!---->
               </button>
-              
-              
               <button
                 aria-disabled="false"
                 class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle t-dialog__button t-dialog__button--text"
@@ -1772,7 +1655,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </span>
                 <!---->
               </button>
-              
             </div>
           </div>
           
@@ -1817,11 +1699,10 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           <!--v-if-->
           
           <div
-            class="t-dialog"
+            class="t-dialog "
           >
-            
-            
-            <!--v-if-->
+            <!---->
+            <!---->
             <div
               class="t-dialog__content"
             >
@@ -1881,15 +1762,11 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </div>
               </div>
             </div>
-            
-            
+            <!---->
             <div
               class="t-dialog__footer t-dialog__footer--full"
             >
-              
-              <!--v-if-->
-              
-              
+              <!---->
               <button
                 aria-disabled="false"
                 class="t-button t-button--size-large t-button--text t-button--default t-button--rectangle t-dialog__button t-dialog__button--text"
@@ -1904,8 +1781,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </span>
                 <!---->
               </button>
-              
-              
               <button
                 aria-disabled="false"
                 class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle t-dialog__button t-dialog__button--text"
@@ -1920,7 +1795,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </span>
                 <!---->
               </button>
-              
             </div>
           </div>
           
@@ -1983,7 +1857,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           <!--v-if-->
           
           <div
-            class="t-dialog"
+            class="t-dialog "
           >
             
             <div
@@ -2031,7 +1905,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
               </picture>
             </div>
             
-            <!--v-if-->
+            <!---->
             <div
               class="t-dialog__content"
             >
@@ -2050,15 +1924,11 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </div>
               </div>
             </div>
-            
-            
+            <!---->
             <div
               class="t-dialog__footer"
             >
-              
-              <!--v-if-->
-              
-              
+              <!---->
               <button
                 aria-disabled="false"
                 class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
@@ -2073,8 +1943,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </span>
                 <!---->
               </button>
-              
-              
               <button
                 aria-disabled="false"
                 class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
@@ -2089,7 +1957,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </span>
                 <!---->
               </button>
-              
             </div>
           </div>
           
@@ -2134,11 +2001,10 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           <!--v-if-->
           
           <div
-            class="t-dialog"
+            class="t-dialog "
           >
-            
-            
-            <!--v-if-->
+            <!---->
+            <!---->
             <div
               class="t-dialog__content"
             >
@@ -2206,10 +2072,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
             <div
               class="t-dialog__footer"
             >
-              
-              <!--v-if-->
-              
-              
+              <!---->
               <button
                 aria-disabled="false"
                 class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
@@ -2224,8 +2087,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </span>
                 <!---->
               </button>
-              
-              
               <button
                 aria-disabled="false"
                 class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
@@ -2240,7 +2101,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </span>
                 <!---->
               </button>
-              
             </div>
           </div>
           
@@ -2305,11 +2165,10 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           <!--v-if-->
           
           <div
-            class="t-dialog"
+            class="t-dialog "
           >
-            
-            
-            <!--v-if-->
+            <!---->
+            <!---->
             <div
               class="t-dialog__content"
             >
@@ -2328,15 +2187,11 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </div>
               </div>
             </div>
-            
-            
+            <!---->
             <div
               class="t-dialog__footer t-dialog__footer--full"
             >
-              
-              <!--v-if-->
-              
-              
+              <!---->
               <button
                 aria-disabled="false"
                 class="t-button t-button--size-large t-button--text t-button--default t-button--rectangle t-dialog__button t-dialog__button--text"
@@ -2351,8 +2206,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </span>
                 <!---->
               </button>
-              
-              
               <button
                 aria-disabled="false"
                 class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle t-dialog__button t-dialog__button--text"
@@ -2367,7 +2220,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </span>
                 <!---->
               </button>
-              
             </div>
           </div>
           
@@ -2409,11 +2261,10 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           <!--v-if-->
           
           <div
-            class="t-dialog"
+            class="t-dialog "
           >
-            
-            
-            <!--v-if-->
+            <!---->
+            <!---->
             <div
               class="t-dialog__content"
             >
@@ -2432,15 +2283,11 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </div>
               </div>
             </div>
-            
-            
+            <!---->
             <div
               class="t-dialog__footer"
             >
-              
-              <!--v-if-->
-              
-              
+              <!---->
               <button
                 aria-disabled="false"
                 class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
@@ -2455,8 +2302,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </span>
                 <!---->
               </button>
-              
-              
               <button
                 aria-disabled="false"
                 class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
@@ -2471,7 +2316,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </span>
                 <!---->
               </button>
-              
             </div>
           </div>
           
@@ -2513,11 +2357,10 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           <!--v-if-->
           
           <div
-            class="t-dialog"
+            class="t-dialog "
           >
-            
-            
-            <!--v-if-->
+            <!---->
+            <!---->
             <div
               class="t-dialog__content"
             >
@@ -2536,15 +2379,11 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </div>
               </div>
             </div>
-            
-            
+            <!---->
             <div
               class="t-dialog__footer t-dialog__footer--column"
             >
-              
-              <!--v-if-->
-              
-              
+              <!---->
               <button
                 aria-disabled="false"
                 class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--vertical"
@@ -2559,8 +2398,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </span>
                 <!---->
               </button>
-              
-              
               <button
                 aria-disabled="false"
                 class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--vertical"
@@ -2575,7 +2412,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </span>
                 <!---->
               </button>
-              
             </div>
           </div>
           
@@ -2617,11 +2453,10 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           <!--v-if-->
           
           <div
-            class="t-dialog"
+            class="t-dialog "
           >
-            
-            
-            <!--v-if-->
+            <!---->
+            <!---->
             <div
               class="t-dialog__content"
             >
@@ -2640,13 +2475,11 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </div>
               </div>
             </div>
-            
-            
+            <!---->
             <div
               class="t-dialog__footer t-dialog__footer--column"
             >
               
-              
               <button
                 aria-disabled="false"
                 class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--vertical"
@@ -2690,13 +2523,8 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 <!---->
               </button>
               
-              
-              
-              <!--v-if-->
-              
-              
-              <!--v-if-->
-              
+              <!---->
+              <!---->
             </div>
           </div>
           
@@ -2738,10 +2566,9 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           <!--v-if-->
           
           <div
-            class="t-dialog"
+            class="t-dialog "
           >
-            
-            
+            <!---->
             <div
               class="t-dialog__close-btn"
             >
@@ -2776,15 +2603,11 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </div>
               </div>
             </div>
-            
-            
+            <!---->
             <div
               class="t-dialog__footer t-dialog__footer--column"
             >
-              
-              <!--v-if-->
-              
-              
+              <!---->
               <button
                 aria-disabled="false"
                 class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--vertical"
@@ -2799,8 +2622,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </span>
                 <!---->
               </button>
-              
-              
               <button
                 aria-disabled="false"
                 class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--vertical"
@@ -2815,7 +2636,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 </span>
                 <!---->
               </button>
-              
             </div>
           </div>
           
@@ -2904,11 +2724,10 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
       <!--v-if-->
       
       <div
-        class="t-dialog"
+        class="t-dialog "
       >
-        
-        
-        <!--v-if-->
+        <!---->
+        <!---->
         <div
           class="t-dialog__content"
         >
@@ -2927,15 +2746,11 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
             </div>
           </div>
         </div>
-        
-        
+        <!---->
         <div
           class="t-dialog__footer t-dialog__footer--full"
         >
-          
-          <!--v-if-->
-          
-          
+          <!---->
           <button
             aria-disabled="false"
             class="t-button t-button--size-large t-button--text t-button--default t-button--rectangle t-dialog__button t-dialog__button--text"
@@ -2950,8 +2765,6 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
             </span>
             <!---->
           </button>
-          
-          
           <button
             aria-disabled="false"
             class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle t-dialog__button t-dialog__button--text"
@@ -2966,7 +2779,6 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
             </span>
             <!---->
           </button>
-          
         </div>
       </div>
       
@@ -3008,11 +2820,10 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
       <!--v-if-->
       
       <div
-        class="t-dialog"
+        class="t-dialog "
       >
-        
-        
-        <!--v-if-->
+        <!---->
+        <!---->
         <div
           class="t-dialog__content"
         >
@@ -3031,15 +2842,11 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
             </div>
           </div>
         </div>
-        
-        
+        <!---->
         <div
           class="t-dialog__footer"
         >
-          
-          <!--v-if-->
-          
-          
+          <!---->
           <button
             aria-disabled="false"
             class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
@@ -3054,8 +2861,6 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
             </span>
             <!---->
           </button>
-          
-          
           <button
             aria-disabled="false"
             class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
@@ -3070,7 +2875,6 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
             </span>
             <!---->
           </button>
-          
         </div>
       </div>
       
@@ -3112,11 +2916,10 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
       <!--v-if-->
       
       <div
-        class="t-dialog"
+        class="t-dialog "
       >
-        
-        
-        <!--v-if-->
+        <!---->
+        <!---->
         <div
           class="t-dialog__content"
         >
@@ -3135,15 +2938,11 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
             </div>
           </div>
         </div>
-        
-        
+        <!---->
         <div
           class="t-dialog__footer t-dialog__footer--column"
         >
-          
-          <!--v-if-->
-          
-          
+          <!---->
           <button
             aria-disabled="false"
             class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--vertical"
@@ -3158,8 +2957,6 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
             </span>
             <!---->
           </button>
-          
-          
           <button
             aria-disabled="false"
             class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--vertical"
@@ -3174,7 +2971,6 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
             </span>
             <!---->
           </button>
-          
         </div>
       </div>
       
@@ -3216,11 +3012,10 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
       <!--v-if-->
       
       <div
-        class="t-dialog"
+        class="t-dialog "
       >
-        
-        
-        <!--v-if-->
+        <!---->
+        <!---->
         <div
           class="t-dialog__content"
         >
@@ -3239,13 +3034,11 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
             </div>
           </div>
         </div>
-        
-        
+        <!---->
         <div
           class="t-dialog__footer t-dialog__footer--column"
         >
           
-          
           <button
             aria-disabled="false"
             class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--vertical"
@@ -3289,13 +3082,8 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
             <!---->
           </button>
           
-          
-          
-          <!--v-if-->
-          
-          
-          <!--v-if-->
-          
+          <!---->
+          <!---->
         </div>
       </div>
       
@@ -3337,10 +3125,9 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
       <!--v-if-->
       
       <div
-        class="t-dialog"
+        class="t-dialog "
       >
-        
-        
+        <!---->
         <div
           class="t-dialog__close-btn"
         >
@@ -3375,15 +3162,11 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
             </div>
           </div>
         </div>
-        
-        
+        <!---->
         <div
           class="t-dialog__footer t-dialog__footer--column"
         >
-          
-          <!--v-if-->
-          
-          
+          <!---->
           <button
             aria-disabled="false"
             class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--vertical"
@@ -3398,8 +3181,6 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
             </span>
             <!---->
           </button>
-          
-          
           <button
             aria-disabled="false"
             class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--vertical"
@@ -3414,7 +3195,6 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
             </span>
             <!---->
           </button>
-          
         </div>
       </div>
       
diff --git a/src/dialog/__test__/index.test.jsx b/src/dialog/__test__/index.test.jsx
index 862aba720..24c3ab9cf 100644
--- a/src/dialog/__test__/index.test.jsx
+++ b/src/dialog/__test__/index.test.jsx
@@ -1,6 +1,6 @@
 import { config, mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
-import Dialog from '../dialog.vue';
+import Dialog from '../dialog';
 import Button from '../../button/button';
 import { CloseIcon } from 'tdesign-icons-vue-next';
 
diff --git a/src/dialog/dialog.tsx b/src/dialog/dialog.tsx
new file mode 100644
index 000000000..a8dfad875
--- /dev/null
+++ b/src/dialog/dialog.tsx
@@ -0,0 +1,169 @@
+import { CloseIcon } from 'tdesign-icons-vue-next';
+import { computed, defineComponent } from 'vue';
+import get from 'lodash/get';
+import isString from 'lodash/isString';
+
+import TButton, { ButtonProps } from '../button';
+import TPopup from '../popup';
+import config from '../config';
+import props from './props';
+import { useTNodeJSX, useContent } from '../hooks/tnode';
+
+const { prefix } = config;
+const name = `${prefix}-dialog`;
+
+export default defineComponent({
+  name,
+  components: { TPopup, TButton, CloseIcon },
+  props,
+  emits: ['update:visible', 'confirm', 'overlay-click', 'cancel', 'close', 'closed'],
+  setup(props, context) {
+    const renderTNodeJSX = useTNodeJSX();
+    const renderContent = useContent();
+    const isTextStyleBtn = computed(() =>
+      [props?.confirmBtn, props?.cancelBtn, ...(props?.actions || [])].some((item) => get(item, 'variant') === 'text'),
+    );
+
+    const footerClass = computed(() => [
+      `${name}__footer`,
+      {
+        [`${name}__footer--column`]: props.buttonLayout === 'vertical',
+        [`${name}__footer--full`]: isTextStyleBtn.value && get(props.actions, 'length', 0) === 0,
+      },
+    ]);
+
+    const buttonClass = computed(() => [
+      `${name}__button`,
+      {
+        [`${name}__button--${props.buttonLayout}`]: !isTextStyleBtn.value,
+        [`${name}__button--text`]: isTextStyleBtn.value,
+      },
+    ]);
+
+    const rootStyles = computed(() => ({
+      width: isString(props.width) ? props.width : `${props.width}px`,
+    }));
+
+    const handleClose = (args: { e: MouseEvent }) => {
+      const { e } = args;
+      context.emit('update:visible', false);
+      context.emit('close', { e, trigger: 'close-btn' });
+    };
+
+    const handleClosed = () => {
+      context.emit('closed');
+    };
+
+    const handleConfirm = (e: MouseEvent) => {
+      context.emit('update:visible', false);
+      context.emit?.('confirm', { e });
+    };
+
+    const handleCancel = (e: MouseEvent) => {
+      context.emit('update:visible', false);
+      context.emit('close', { e, trigger: 'cancel' });
+      context.emit('cancel', { e });
+    };
+
+    const handleOverlayClick = (args: { e: MouseEvent }) => {
+      const { e } = args;
+      if (!props.closeOnOverlayClick) {
+        return;
+      }
+      context.emit('update:visible', false);
+      context.emit('close', { e, trigger: 'overlay' });
+      context.emit('overlay-click', { e });
+    };
+
+    const calcBtn = (btn: any) => (isString(btn) ? { content: btn } : btn);
+    const confirmBtnProps = computed(() => ({
+      theme: 'primary',
+      ...calcBtn(props.confirmBtn),
+    }));
+    const cancelBtnProps = computed<ButtonProps>(() => ({
+      theme: isTextStyleBtn.value ? 'default' : 'light',
+      ...calcBtn(props.cancelBtn),
+    }));
+    const actionsBtnProps = computed(() => props.actions?.map((item) => calcBtn(item)));
+
+    return () => {
+      const { visible, showOverlay, overlayProps, preventScrollThrough, destroyOnClose, zIndex, closeBtn, actions } =
+        props;
+      const renderTitleNode = () => {
+        const titleNode = renderTNodeJSX('title');
+        if (!titleNode) {
+          return null;
+        }
+
+        return <div class={`${name}__header`}>{titleNode}</div>;
+      };
+      const renderContentNode = () => {
+        const contentNode = renderContent('default', 'content');
+        if (!contentNode) {
+          return null;
+        }
+        return (
+          <div class={`${name}__body`}>
+            <div class={`${name}__body-text`}>{contentNode}</div>
+          </div>
+        );
+      };
+      const renderActionsNode = () => {
+        const actionsNode = renderTNodeJSX('actions');
+        if (actionsNode && actionsBtnProps.value) {
+          return actionsBtnProps.value.map((item, index) => (
+            <t-button key={index} {...item} class={buttonClass.value} onClick={handleCancel} />
+          ));
+        }
+        return null;
+      };
+      const renderCancelBtnNode = () => {
+        const cancelBtnNode = renderTNodeJSX('cancelBtn');
+        if (!actions && cancelBtnNode) {
+          return <t-button {...cancelBtnProps.value} class={buttonClass.value} onClick={handleCancel} />;
+        }
+        return null;
+      };
+
+      const renderConfirmBntNode = () => {
+        const confirmBtnNode = renderTNodeJSX('confirmBtn');
+        if (!actions && confirmBtnNode) {
+          return <t-button {...confirmBtnProps.value} class={buttonClass.value} onClick={handleConfirm} />;
+        }
+        return null;
+      };
+      return (
+        <t-popup
+          visible={visible}
+          placement="center"
+          show-overlay={showOverlay}
+          overlay-props={overlayProps}
+          prevent-scroll-through={preventScrollThrough}
+          destroy-on-close={destroyOnClose}
+          z-index={zIndex}
+          onClose={handleOverlayClick}
+          onClosed={handleClosed}
+        >
+          <div class={`${name} ${context.attrs.class || ''}`} style={rootStyles.value}>
+            {renderTNodeJSX('top')}
+            {closeBtn && (
+              <div class={`${name}__close-btn`}>
+                <close-icon onClick={handleClose} />
+              </div>
+            )}
+            <div class={`${name}__content`}>
+              {renderTitleNode()}
+              {renderContentNode()}
+            </div>
+            {renderTNodeJSX('middle')}
+            <div class={footerClass.value}>
+              {renderActionsNode()}
+              {renderCancelBtnNode()}
+              {renderConfirmBntNode()}
+            </div>
+          </div>
+        </t-popup>
+      );
+    };
+  },
+});
diff --git a/src/dialog/dialog.vue b/src/dialog/dialog.vue
deleted file mode 100644
index db85b56c6..000000000
--- a/src/dialog/dialog.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<template>
-  <t-popup
-    :visible="visible"
-    placement="center"
-    :show-overlay="showOverlay"
-    :overlay-props="overlayProps"
-    :prevent-scroll-through="preventScrollThrough"
-    :destroy-on-close="destroyOnClose"
-    :z-index="zIndex"
-    @close="handleOverlayClick"
-    @closed="handleClosed"
-  >
-    <div :class="`${name}`" :style="rootStyles">
-      <slot name="top" />
-      <div v-if="closeBtn" :class="`${name}__close-btn`">
-        <close-icon @click="handleClose" />
-      </div>
-      <div :class="`${name}__content`">
-        <div v-if="titleNode" :class="`${name}__header`">
-          <t-node :content="titleNode" />
-        </div>
-        <div v-if="contentNode" :class="`${name}__body`">
-          <div :class="`${name}__body-text`">
-            <t-node :content="contentNode" />
-          </div>
-        </div>
-      </div>
-      <slot name="middle" />
-      <div :class="footerClass">
-        <slot name="actions">
-          <template v-if="actionsBtnProps">
-            <t-button
-              v-for="(item, index) in actionsBtnProps"
-              :key="index"
-              v-bind="item"
-              :class="buttonClass"
-              @click="handleCancel"
-            />
-          </template>
-        </slot>
-        <slot name="cancelBtn">
-          <template v-if="!actions && cancelBtn">
-            <t-button v-bind="cancelBtnProps" :class="buttonClass" @click="handleCancel" />
-          </template>
-        </slot>
-        <slot name="confirmBtn">
-          <template v-if="!actions && confirmBtn">
-            <t-button v-bind="confirmBtnProps" :class="buttonClass" @click="handleConfirm" />
-          </template>
-        </slot>
-      </div>
-    </div>
-  </t-popup>
-</template>
-<script lang="ts">
-import { CloseIcon } from 'tdesign-icons-vue-next';
-import { computed, toRefs, defineComponent, getCurrentInstance } from 'vue';
-import get from 'lodash/get';
-import isString from 'lodash/isString';
-
-import TButton, { ButtonProps } from '../button';
-import TPopup from '../popup';
-import config from '../config';
-import DialogProps from './props';
-import { renderContent, renderTNode, TNode } from '../shared';
-
-const { prefix } = config;
-const name = `${prefix}-dialog`;
-
-export default defineComponent({
-  name,
-  components: { TPopup, TNode, TButton, CloseIcon },
-  props: DialogProps,
-  emits: ['update:visible', 'confirm', 'overlay-click', 'cancel', 'close', 'closed'],
-  setup(props, context) {
-    const internalInstance = getCurrentInstance();
-    const contentNode = computed(() => renderContent(internalInstance, 'default', 'content'));
-    const titleNode = computed(() => renderTNode(internalInstance, 'title'));
-    const isTextStyleBtn = computed(() =>
-      [props?.confirmBtn, props?.cancelBtn, ...(props?.actions || [])].some((item) => get(item, 'variant') === 'text'),
-    );
-
-    const footerClass = computed(() => [
-      `${name}__footer`,
-      {
-        [`${name}__footer--column`]: props.buttonLayout === 'vertical',
-        [`${name}__footer--full`]: isTextStyleBtn.value && get(props.actions, 'length', 0) === 0,
-      },
-    ]);
-
-    const buttonClass = computed(() => [
-      `${name}__button`,
-      {
-        [`${name}__button--${props.buttonLayout}`]: !isTextStyleBtn.value,
-        [`${name}__button--text`]: isTextStyleBtn.value,
-      },
-    ]);
-
-    const rootStyles = computed(() => ({
-      width: isString(props.width) ? props.width : `${props.width}px`,
-    }));
-
-    const handleClose = (args: { e: MouseEvent }) => {
-      const { e } = args;
-      context.emit('update:visible', false);
-      context.emit('close', { e, trigger: 'close-btn' });
-    };
-
-    const handleClosed = () => {
-      context.emit('closed');
-    };
-
-    const handleConfirm = (e: MouseEvent) => {
-      context.emit('update:visible', false);
-      context.emit?.('confirm', { e });
-    };
-
-    const handleCancel = (e: MouseEvent) => {
-      context.emit('update:visible', false);
-      context.emit('close', { e, trigger: 'cancel' });
-      context.emit('cancel', { e });
-    };
-
-    const handleOverlayClick = (args: { e: MouseEvent }) => {
-      const { e } = args;
-      if (!props.closeOnOverlayClick) {
-        return;
-      }
-      context.emit('update:visible', false);
-      context.emit('close', { e, trigger: 'overlay' });
-      context.emit('overlay-click', { e });
-    };
-
-    const calcBtn = (btn: any) => (isString(btn) ? { content: btn } : btn);
-    const confirmBtnProps = computed(() => ({
-      theme: 'primary',
-      ...calcBtn(props.confirmBtn),
-    }));
-    const cancelBtnProps = computed<ButtonProps>(() => ({
-      theme: isTextStyleBtn.value ? 'default' : 'light',
-      ...calcBtn(props.cancelBtn),
-    }));
-    const actionsBtnProps = computed(() => props.actions?.map((item) => calcBtn(item)));
-
-    return {
-      name,
-      footerClass,
-      buttonClass,
-      contentNode,
-      titleNode,
-      confirmBtnProps,
-      cancelBtnProps,
-      actionsBtnProps,
-      handleClose,
-      handleClosed,
-      handleConfirm,
-      handleCancel,
-      handleOverlayClick,
-      rootStyles,
-      ...toRefs(props),
-    };
-  },
-});
-</script>
diff --git a/src/dialog/index.ts b/src/dialog/index.ts
index 3230a30ef..cea2090c1 100644
--- a/src/dialog/index.ts
+++ b/src/dialog/index.ts
@@ -1,6 +1,6 @@
 import { createApp, h, App, ref, nextTick, reactive } from 'vue';
 
-import Dialog from './dialog.vue';
+import Dialog from './dialog';
 import { WithInstallType, isBrowser } from '../shared';
 import { DialogCloseContext, TdDialogProps, DialogInstance } from './type';