Mention app region in custom title bar section (#3386)

Legend-Master · FabianLars · web-flow · commit d516022e2daa · 2025-07-04T20:44:19.000+08:00
Co-authored-by: FabianLars &lt;FabianLars@users.noreply.github.com&gt;
diff --git a/src/content/docs/learn/window-customization.mdx b/src/content/docs/learn/window-customization.mdx
@@ -85,23 +85,28 @@ Add this CSS sample to keep it at the top of the screen and style the buttons:
   height: 30px;
   background: #329ea3;
   user-select: none;
-  display: flex;
-  justify-content: flex-end;
+  display: grid;
+  grid-template-columns: auto max-content;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
 }
-.titlebar-button {
+.titlebar > .controls {
+  display: flex;
+}
+.titlebar button {
+  appearance: none;
+  padding: 0;
+  margin: 0;
+  border: none;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   width: 30px;
-  height: 30px;
-  user-select: none;
-  -webkit-user-select: none;
+  background-color: transparent;
 }
-.titlebar-button:hover {
+.titlebar button:hover {
   background: #5bbec3;
 }
 ```
@@ -111,27 +116,50 @@ Add this CSS sample to keep it at the top of the screen and style the buttons:
 Put this at the top of your `<body>` tag:
 
 ```html
-<div data-tauri-drag-region class="titlebar">
-  <div class="titlebar-button" id="titlebar-minimize">
-    <img
-      src="https://api.iconify.design/mdi:window-minimize.svg"
-      alt="minimize"
-    />
-  </div>
-  <div class="titlebar-button" id="titlebar-maximize">
-    <img
-      src="https://api.iconify.design/mdi:window-maximize.svg"
-      alt="maximize"
-    />
-  </div>
-  <div class="titlebar-button" id="titlebar-close">
-    <img src="https://api.iconify.design/mdi:close.svg" alt="close" />
+<div class="titlebar">
+  <div data-tauri-drag-region></div>
+  <div class="controls">
+    <button id="titlebar-minimize" title="minimize">
+      <!-- https://api.iconify.design/mdi:window-minimize.svg -->
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path fill="currentColor" d="M19 13H5v-2h14z" /><path>
+      </svg>
+    </button>
+    <button id="titlebar-maximize" title="maximize">
+      <!-- https://api.iconify.design/mdi:window-maximize.svg -->
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path fill="currentColor" d="M4 4h16v16H4zm2 4v10h12V8z" />
+      </svg>
+    </button>
+    <button id="titlebar-close" title="close">
+      <!-- https://api.iconify.design/mdi:close.svg -->
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path
+          fill="currentColor"
+          d="M13.46 12L19 17.54V19h-1.46L12 13.46L6.46 19H5v-1.46L10.54 12L5 6.46V5h1.46L12 10.54L17.54 5H19v1.46z"
+        />
+      </svg>
+    </button>
   </div>
 </div>
 ```
 
 Note that you may need to move the rest of your content down so that the titlebar doesn't cover it.
 
+:::tip
+
+On Windows, if you just want a title bar that doesn't need custom interactions, you can use
+
+```css
+*[data-tauri-drag-region] {
+  app-region: drag;
+}
+```
+
+to make the title bar work with touch and pen inputs
+
+:::
+
 #### JavaScript
 
 Use this code snippet to make the buttons work:
