feat(components): add support for anchor tag buttons

package.json

@@ -92,7 +92,7 @@
         "eslint-plugin-tsdoc": "0.2.17",
         "jsdom": "^22.1.0",
         "prettier": "^3.0.3",
-        "prettier-plugin-tailwindcss": "0.5.5",
+        "prettier-plugin-tailwindcss": "0.5.7",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",

src/components/button/button.stories.tsx

@@ -44,6 +44,12 @@ export const WithIcons: Story = {
         RightIcon: icons.LockIcon,
     },
 };
+export const AsAnchor: Story = {
+    args: {
+        as: "a",
+        href: "https://www.google.com",
+    },
+};
 export const Loading: Story = {
     args: { loading: true },
 };

src/components/button/button.tsx

@@ -25,12 +25,21 @@ const iconVariants = {
     "danger-secondary": "",
 };
 
-export interface ButtonProps extends React.ComponentPropsWithoutRef<"button"> {
+type ButtonOrLinkProps =
+    | (React.ButtonHTMLAttributes<HTMLButtonElement> & {
+          as?: "button";
+          href?: undefined;
+      })
+    | (React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+          as: "a";
+      });
+
+export type ButtonProps = {
     variant?: keyof typeof buttonVariants;
     loading?: boolean;
     LeftIcon?: React.ElementType;
     RightIcon?: React.ElementType;
-}
+} & ButtonOrLinkProps;
 
 const Button = ({
     variant = "primary",
@@ -41,25 +50,23 @@ const Button = ({
     RightIcon,
     ...props
 }: ButtonProps) => {
+    const HtmlTag = (props.as || "button") as React.ElementType;
+
+    const commonClasses = classNames(
+        `group flex h-8 items-center gap-2 whitespace-nowrap rounded px-4 text-xs font-semibold focus:outline-none disabled:cursor-not-allowed`,
+        buttonVariants[variant],
+        className
+    );
+
     return (
-        <button
-            className={classNames(
-                `group flex h-8 items-center gap-2 whitespace-nowrap rounded px-4 text-xs font-semibold focus:outline-none disabled:cursor-not-allowed`,
-                buttonVariants[variant],
-                className
-            )}
-            {...props}
-        >
+        <HtmlTag className={commonClasses} {...props}>
             {loading ? <Spinner size="small" /> : null}
-
             {LeftIcon && !loading ? (
                 <LeftIcon className={`${iconVariants[variant]} h-3 w-3`} />
             ) : null}
-
             {children}
-
             {RightIcon ? <RightIcon className={`${iconVariants[variant]} h-3 w-3`} /> : null}
-        </button>
+        </HtmlTag>
     );
 };