From 63f0f50c12d5d48fcad921e02ad89b44bc4b85cc Mon Sep 17 00:00:00 2001
From: Henry Su <henrysu4707@gmail.com>
Date: Sat, 24 Oct 2026 00:37:41 -0500
Subject: [PATCH] fix(react-email): convert pt padding on Button instead of
 zeroing it

---
 .changeset/button-pt-padding.md                        |  5 +++++
 .../react-email/src/components/button/button.spec.tsx  | 10 ++++++++++
 .../src/components/button/utils/parse-padding.ts       |  4 +++-
 .../src/components/button/utils/utils.spec.ts          |  5 +++++
 4 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/button-pt-padding.md

diff --git a/.changeset/button-pt-padding.md b/.changeset/button-pt-padding.md
new file mode 100644
index 0000000000..9052858514
--- /dev/null
+++ b/.changeset/button-pt-padding.md
@@ -0,0 +1,5 @@
+---
+"react-email": patch
+---
+
+`<Button>` now converts `pt` padding values to `px` instead of treating them as `0`, so `style={{ padding: '9pt 15pt' }}` or `className="px-[15pt] py-[9pt]"` keeps its padding in every client and in the Outlook spacers.
diff --git a/packages/react-email/src/components/button/button.spec.tsx b/packages/react-email/src/components/button/button.spec.tsx
index dbcee2598a..13895ac3dc 100644
--- a/packages/react-email/src/components/button/button.spec.tsx
+++ b/packages/react-email/src/components/button/button.spec.tsx
@@ -50,4 +50,14 @@ describe('<Button> component', () => {
       `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><a style="line-height:150%;text-decoration:underline red;display:block;max-width:50%;mso-padding-alt:0px" target="_blank"><span><!--[if mso]><i style="mso-font-width:0%;mso-text-raise:0px" hidden></i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px"></span><span><!--[if mso]><i style="mso-font-width:0%" hidden>&#8203;</i><![endif]--></span></a><!--/$-->"`,
     );
   });
+
+  it('converts pt padding values instead of zeroing them', async () => {
+    const html = await render(
+      <Button href="https://example.com" style={{ padding: '9pt 15pt' }} />,
+    );
+    expect(html).toContain(
+      'padding:9pt 15pt;padding-top:12px;padding-right:20px;padding-bottom:12px;padding-left:20px',
+    );
+    expect(html).toContain('mso-font-width:500%;mso-text-raise:18px');
+  });
 });
diff --git a/packages/react-email/src/components/button/utils/parse-padding.ts b/packages/react-email/src/components/button/utils/parse-padding.ts
index e90d93cab7..bb02dd9340 100644
--- a/packages/react-email/src/components/button/utils/parse-padding.ts
+++ b/packages/react-email/src/components/button/utils/parse-padding.ts
@@ -23,7 +23,7 @@ export function convertToPx(value: PaddingType) {
     return value;
   }
 
-  const matches = /^([\d.]+)(px|em|rem|%)$/.exec(value);
+  const matches = /^([\d.]+)(px|pt|em|rem|%)$/.exec(value);
 
   if (matches && matches.length === 3) {
     const numValue = Number.parseFloat(matches[1]!);
@@ -32,6 +32,8 @@ export function convertToPx(value: PaddingType) {
     switch (unit) {
       case 'px':
         return numValue;
+      case 'pt':
+        return (numValue * 4) / 3;
       case 'em':
       case 'rem':
         px = numValue * 16;
diff --git a/packages/react-email/src/components/button/utils/utils.spec.ts b/packages/react-email/src/components/button/utils/utils.spec.ts
index ed6a569d7c..ccbefb59d5 100644
--- a/packages/react-email/src/components/button/utils/utils.spec.ts
+++ b/packages/react-email/src/components/button/utils/utils.spec.ts
@@ -7,6 +7,11 @@ describe('convertToPx', () => {
     expect(result).toBe(10);
   });
 
+  it('converts "9pt" to 12', () => {
+    const result = convertToPx('9pt');
+    expect(result).toBe(12);
+  });
+
   it('converts "2em" to 32', () => {
     const result = convertToPx('2em');
     expect(result).toBe(32);