diff --git a/.changeset/button-link-underline-from-font.md b/.changeset/button-link-underline-from-font.md
new file mode 100644
index 00000000000..72006395211
--- /dev/null
+++ b/.changeset/button-link-underline-from-font.md
@@ -0,0 +1,5 @@
+---
+'@clerk/mosaic': patch
+---
+
+Update link button to use underline position from font over hardcoded offset
diff --git a/packages/mosaic/src/components/button/button.styles.ts b/packages/mosaic/src/components/button/button.styles.ts
index 41d006442f2..23124deab69 100644
--- a/packages/mosaic/src/components/button/button.styles.ts
+++ b/packages/mosaic/src/components/button/button.styles.ts
@@ -378,7 +378,8 @@ export const variants = stylex.create({
     paddingInlineStart: 0,
     textDecorationColor: { default: 'transparent', ':not([data-disabled]):hover': 'currentColor' },
     textDecorationLine: 'underline',
-    textUnderlineOffset: '2px',
+    textDecorationSkipInk: 'auto',
+    textUnderlinePosition: 'from-font',
     height: 'auto',
   },
   'link-neutral': {
@@ -395,7 +396,8 @@ export const variants = stylex.create({
     paddingInlineStart: 0,
     textDecorationColor: { default: 'transparent', ':not([data-disabled]):hover': 'currentColor' },
     textDecorationLine: 'underline',
-    textUnderlineOffset: '2px',
+    textDecorationSkipInk: 'auto',
+    textUnderlinePosition: 'from-font',
     height: 'auto',
   },
   'link-negative': {
@@ -412,7 +414,8 @@ export const variants = stylex.create({
     paddingInlineStart: 0,
     textDecorationColor: { default: 'transparent', ':not([data-disabled]):hover': 'currentColor' },
     textDecorationLine: 'underline',
-    textUnderlineOffset: '2px',
+    textDecorationSkipInk: 'auto',
+    textUnderlinePosition: 'from-font',
     height: 'auto',
   },
 });