diff --git a/packages/ui/src/Button.tsx b/packages/ui/src/Button.tsx
index 97ea5aed6..f041d3770 100644
--- a/packages/ui/src/Button.tsx
+++ b/packages/ui/src/Button.tsx
@@ -105,25 +105,39 @@ type Button = {
 const hasHref = (props: ButtonElementProps | AnchorElementProps): props is AnchorElementProps =>
   'href' in props;
 
-export const Button: Button = ({ loading, justifyLeft, ...props }) => {
-  const Element = hasHref(props) ? 'a' : 'button';
-
-  return (
-    // @ts-expect-error -- this does not actually dynamically adjust its expectations for some reason :P
-    <Element
-      {...props}
-      className={clsx(
-        'border rounded-md items-center transition-colors duration-100 cursor-default no-underline',
-        { 'opacity-5': loading, '!p-1': props.noPadding },
-        { 'justify-center': !justifyLeft },
-        sizes[props.size || 'default'],
-        variants[props.variant || 'default'],
-        { 'active:translate-y-[1px]': props.pressEffect },
-        { 'border-0': props.noBorder },
-        props.className
-      )}
-    >
-      {props.children}
-    </Element>
+export const Button: Button = ({
+  loading,
+  justifyLeft,
+  variant,
+  size,
+  icon,
+  noPadding,
+  noBorder,
+  pressEffect,
+  className,
+  ...props
+}) => {
+  className = clsx(
+    'border rounded-md items-center transition-colors duration-100 cursor-default no-underline',
+    { 'opacity-5': loading, '!p-1': noPadding },
+    { 'justify-center': !justifyLeft },
+    sizes[size || 'default'],
+    variants[variant || 'default'],
+    { 'active:translate-y-[1px]': pressEffect },
+    { 'border-0': noBorder },
+    className
   );
+
+  if (hasHref(props))
+    return (
+      <a {...(props as AnchorElementProps)} className={className}>
+        {props.children}
+      </a>
+    );
+  else
+    return (
+      <button {...(props as ButtonElementProps)} className={className}>
+        {props.children}
+      </button>
+    );
 };