fix(button): next.JS no longer complains buttons are being rendered d…

…ynamically By using the "as" property, we create the button element as simplay a button but switch it to an anchor when href is present. "fix #14", "re #16"
dots-ui · May 9, 2023 · f19fdb1 · f19fdb1
1 parent 5f9fdb7
commit f19fdb1
Showing 1 changed file with 16 additions and 11 deletions.
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -16,14 +16,10 @@ export type ButtonProps = React.HTMLAttributes<
 };
 
 export const Button = (props: ButtonProps) => {
-  const { variant, accent } = props;
-  const ButtonElement = createButtonElement(props);
-  return <ButtonElement {...props} />;
+  return <ButtonElement as={props.href ? "a" : "button"} {...props} />;
 };
 
-const createButtonElement = (props: ButtonProps) => styled(
-  props.href ? "a" : "button"
-)<ButtonProps>`
+const ButtonElement = styled.button<ButtonProps>`
   font-size: ${(props) => {
     if (props.size === "small") return "0.75em";
     if (props.size === "large") return "1.25em";
@@ -66,17 +62,24 @@ const createButtonElement = (props: ButtonProps) => styled(
   border: ${(props) => {
     if (props.variant !== "outlined") return "none";
     return `1px solid ${
-      props.theme[props.accent || "info"] ?? getThemeValue(props.accent || "info")
+      props.theme[props.accent || "info"] ??
+      getThemeValue(props.accent || "info")
     }`;
   }};
   background-color: ${(props) => {
     if (props.variant === "contained")
-      return props.theme[props.accent || "info"] ?? getThemeValue(props.accent || "info");
+      return (
+        props.theme[props.accent || "info"] ??
+        getThemeValue(props.accent || "info")
+      );
     return "transparent";
   }};
   color: ${(props) => {
     if (props.variant === "contained") return "#fff";
-    return props.theme[props.accent || "info"] ?? getThemeValue(props.accent || "info");
+    return (
+      props.theme[props.accent || "info"] ??
+      getThemeValue(props.accent || "info")
+    );
   }};
 
   &:disabled {
@@ -99,15 +102,17 @@ const createButtonElement = (props: ButtonProps) => styled(
     filter: drop-shadow(
         0em 0.125em 0.625em
           ${(props) =>
-            props.theme[props.accent || "info"] ?? getThemeValue(props.accent || "info")}80
+            props.theme[props.accent || "info"] ??
+            getThemeValue(props.accent || "info")}80
       )
       brightness(110%);
   }
   &:active:not(:disabled) {
     filter: drop-shadow(
         0em 0.0625em 0.3125em
           ${(props) =>
-            props.theme[props.accent || "info"] ?? getThemeValue(props.accent || "info")}80
+            props.theme[props.accent || "info"] ??
+            getThemeValue(props.accent || "info")}80
       )
       brightness(80%);
   }