diff --git a/addons/web/static/src/views/view_button/view_button.js b/addons/web/static/src/views/view_button/view_button.js
index 66d19e53761..c0649514aef 100644
--- a/addons/web/static/src/views/view_button/view_button.js
+++ b/addons/web/static/src/views/view_button/view_button.js
@@ -113,6 +113,7 @@ export class ViewButton extends Component {
 }
 ViewButton.template = "views.ViewButton";
 ViewButton.props = [
+    "id?",
     "tag?",
     "record?",
     "className?",
diff --git a/addons/web/static/src/views/view_button/view_button.xml b/addons/web/static/src/views/view_button/view_button.xml
index 536bd6450dc..f6930218336 100644
--- a/addons/web/static/src/views/view_button/view_button.xml
+++ b/addons/web/static/src/views/view_button/view_button.xml
@@ -3,6 +3,7 @@
 
   <t t-name="views.ViewButton" owl="1">
     <t t-tag="props.tag"
+        t-att-id="props.id"
         t-att-class="getClassName()"
         t-att-disabled="disabled"
         t-att-name="props.clickParams.name"
diff --git a/addons/web/static/src/views/view_compiler.js b/addons/web/static/src/views/view_compiler.js
index 1a843f15ee9..3c520d98250 100644
--- a/addons/web/static/src/views/view_compiler.js
+++ b/addons/web/static/src/views/view_compiler.js
@@ -34,7 +34,7 @@ const BUTTON_CLICK_PARAMS = [
     // just override compileButton in kanban compiler to add the debounce?
     "debounce",
 ];
-const BUTTON_STRING_PROPS = ["string", "size", "title", "icon"];
+const BUTTON_STRING_PROPS = ["string", "size", "title", "icon", "id"];
 const INTERP_REGEXP = /(\{\{|#\{)(.*?)(\}{1,2})/g;
 
 /**
diff --git a/addons/web/static/tests/views/form/form_compiler_tests.js b/addons/web/static/tests/views/form/form_compiler_tests.js
index e6deedd3321..8947b6c404a 100644
--- a/addons/web/static/tests/views/form/form_compiler_tests.js
+++ b/addons/web/static/tests/views/form/form_compiler_tests.js
@@ -271,4 +271,24 @@ QUnit.module("Form Renderer", (hooks) => {
             resId: 1,
         });
     });
+
+    QUnit.test("compile a button with id", async (assert) => {
+        serverData.views = {
+            "partner,1,form": /*xml*/ `
+                <form>
+                    <header>
+                         <button id="action_button" string="ActionButton"/>
+                     </header>
+                </form>`,
+        };
+
+        await makeView({
+            serverData,
+            resModel: "partner",
+            type: "form",
+            resId: 1,
+        });
+
+        assert.containsOnce(target, "button[id=action_button]");
+    });
 });