diff --git a/packages/astro/src/astro-components/unstyled/SignInButton.astro b/packages/astro/src/astro-components/unstyled/SignInButton.astro
index 8440110e0f8..5fb2c596423 100644
--- a/packages/astro/src/astro-components/unstyled/SignInButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignInButton.astro
@@ -7,12 +7,12 @@ import { customAlphabet, urlAlphabet } from "nanoid";
 
 const safeId = customAlphabet(urlAlphabet, 10)();
 
-const { as: Element = 'button', id = safeId, ...props } = Astro.props
+const { as: Tag = 'button', id = safeId, ...props } = Astro.props
 ---
 
-<Element id={id}>
+<Tag id={id}>
   <slot />
-</Element >
+</Tag >
 
 <script is:inline define:vars={{ props, safeId }}>
   const btn = document.querySelector(`#${safeId}`);
diff --git a/packages/astro/src/astro-components/unstyled/SignOutButton.astro b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
index 8e2463e7970..88e528ef813 100644
--- a/packages/astro/src/astro-components/unstyled/SignOutButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
@@ -6,12 +6,12 @@ import { customAlphabet, urlAlphabet } from "nanoid";
 
 const safeId = customAlphabet(urlAlphabet, 10)();
 
-const { as: Element = 'button', id = safeId, ...props } = Astro.props
+const { as: Tag = 'button', id = safeId, ...props } = Astro.props
 ---
 
-<Element id={id}>
+<Tag id={id}>
   <slot />
-</Element >
+</Tag >
 
 <script is:inline define:vars={{ props, safeId }}>
   const btn = document.querySelector(`#${safeId}`);
diff --git a/packages/astro/src/astro-components/unstyled/SignUpButton.astro b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
index f8c73aa42e9..46d9b7477bf 100644
--- a/packages/astro/src/astro-components/unstyled/SignUpButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
@@ -7,12 +7,12 @@ import { customAlphabet, urlAlphabet } from "nanoid";
 
 const safeId = customAlphabet(urlAlphabet, 10)();
 
-const { as: Element = 'button', id = safeId, ...props } = Astro.props
+const { as: Tag = 'button', id = safeId, ...props } = Astro.props
 ---
 
-<Element id={id}>
+<Tag id={id}>
   <slot />
-</Element >
+</Tag >
 
 <script is:inline define:vars={{ props, safeId }}>
   const btn = document.querySelector(`#${safeId}`);