diff --git a/dev/vscode-button/block-button.html b/dev/vscode-button/block-button.html
new file mode 100644
index 000000000..0f4c95d3f
--- /dev/null
+++ b/dev/vscode-button/block-button.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VSCode Elements</title>
+    <link
+      rel="stylesheet"
+      href="/node_modules/@vscode/codicons/dist/codicon.css"
+      id="vscode-codicon-stylesheet"
+    >
+    <script
+      type="module"
+      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
+    ></script>
+    <script type="module" src="/dist/main.js"></script>
+    <script>
+      const logEvents = (selector, eventType) => {
+        document.querySelector(selector).addEventListener(eventType, (ev) => {
+          console.log(ev);
+        });
+      };
+    </script>
+  </head>
+
+  <body>
+    <main>
+      <vscode-demo>
+        <div
+          style="width: 320px; display: flex; flex-direction: column; gap: 6px"
+        >
+          <vscode-button style="align-self: flex-start"
+            >Inline Button</vscode-button
+          >
+          <vscode-button block>Block Button</vscode-button>
+          <vscode-button block secondary>Secondary Block Button</vscode-button>
+        </div>
+      </vscode-demo>
+    </main>
+  </body>
+</html>
diff --git a/dev/vscode-button/variations.html b/dev/vscode-button/variations.html
index afcee797a..d218cd0e0 100644
--- a/dev/vscode-button/variations.html
+++ b/dev/vscode-button/variations.html
@@ -70,6 +70,19 @@
               disabled
             ></vscode-button>
           </vscode-button-group>
+          <div
+            style="
+              flex: 1 1 280px;
+              display: flex;
+              flex-direction: column;
+              gap: 6px;
+            "
+          >
+            <vscode-button block>Block Button</vscode-button>
+            <vscode-button block secondary
+              >Secondary Block Button</vscode-button
+            >
+          </div>
         </div>
       </vscode-demo>
     </main>
diff --git a/src/vscode-button/vscode-button.styles.ts b/src/vscode-button/vscode-button.styles.ts
index 6f9586168..a0edd4eb7 100644
--- a/src/vscode-button/vscode-button.styles.ts
+++ b/src/vscode-button/vscode-button.styles.ts
@@ -13,6 +13,11 @@ const styles: CSSResultGroup = [
       width: auto;
     }
 
+    :host([block]) {
+      display: block;
+      width: 100%;
+    }
+
     .base {
       align-items: center;
       background-color: var(--vscode-button-background, #0078d4);
@@ -44,6 +49,12 @@ const styles: CSSResultGroup = [
       width: 100%;
     }
 
+    :host([block]) .base {
+      min-height: 28px;
+      text-align: center;
+      width: 100%;
+    }
+
     .base:after {
       background-color: var(
         --vscode-button-separator,
diff --git a/src/vscode-button/vscode-button.test.ts b/src/vscode-button/vscode-button.test.ts
index 199a4755e..f79a0046e 100644
--- a/src/vscode-button/vscode-button.test.ts
+++ b/src/vscode-button/vscode-button.test.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import sinon from 'sinon';
 import {VscodeButton} from './index.js';
-import {expect, fixture, html} from '@open-wc/testing';
+import {expect, fixture, html, aTimeout} from '@open-wc/testing';
 import {$} from '../includes/test-helpers.js';
 
 describe('vscode-button', () => {
@@ -233,5 +233,24 @@ describe('vscode-button', () => {
     expect(base.classList.contains('has-content-after')).to.be.true;
   });
 
+  it('renders block buttons as full-width controls', async () => {
+    const wrapper = await fixture<HTMLDivElement>(html`
+      <div style="width: 320px">
+        <vscode-button block>Commit</vscode-button>
+      </div>
+    `);
+    const el = wrapper.querySelector('vscode-button') as VscodeButton;
+
+    await el.updateComplete;
+    await aTimeout(0);
+
+    const base = $(el.shadowRoot!, '.base') as HTMLElement;
+    const rect = base.getBoundingClientRect();
+
+    expect(rect.width).to.be.closeTo(320, 0.5);
+    expect(rect.height).to.be.closeTo(28, 0.5);
+    expect(window.getComputedStyle(el).display).to.eq('block');
+  });
+
   it('sets the form value');
 });
diff --git a/src/vscode-button/vscode-button.ts b/src/vscode-button/vscode-button.ts
index 4cdcfc950..5730cc2a2 100644
--- a/src/vscode-button/vscode-button.ts
+++ b/src/vscode-button/vscode-button.ts
@@ -48,6 +48,13 @@ export class VscodeButton extends VscElement {
   @property({type: Boolean, reflect: true})
   secondary = false;
 
+  /**
+   * Makes the button fill its container and use VS Code's block sizing,
+   * similar to the Source Control "Commit" action.
+   */
+  @property({type: Boolean, reflect: true})
+  block = false;
+
   /** @internal */
   @property({reflect: true})
   override role = 'button';
