diff --git a/package-lock.json b/package-lock.json
index 1bbab502..9cfa3609 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -61,7 +61,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",
@@ -21636,9 +21636,9 @@
             }
         },
         "node_modules/prettier-plugin-tailwindcss": {
-            "version": "0.5.5",
-            "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.5.tgz",
-            "integrity": "sha512-voy0CjWv/CM8yeaduv5ZwovovpTGMR5LbzlhGF+LtEvMJt9wBeVTVnW781hL38R/RcDXCJwN2rolsgr94B/n0Q==",
+            "version": "0.5.7",
+            "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.7.tgz",
+            "integrity": "sha512-4v6uESAgwCni6YF6DwJlRaDjg9Z+al5zM4JfngcazMy4WEf/XkPS5TEQjbD+DZ5iNuG6RrKQLa/HuX2SYzC3kQ==",
             "dev": true,
             "engines": {
                 "node": ">=14.21.3"
diff --git a/package.json b/package.json
index a28d7b95..6b82449c 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/button/button.stories.tsx b/src/components/button/button.stories.tsx
index 2f633cce..0a89715b 100644
--- a/src/components/button/button.stories.tsx
+++ b/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 },
 };
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 1de4d42d..6b994ba5 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -25,12 +25,20 @@ const iconVariants = {
     "danger-secondary": "",
 };
 
-export interface ButtonProps extends React.ComponentPropsWithoutRef<"button"> {
+type ButtonOrLinkProps =
+    | (React.ButtonHTMLAttributes<HTMLButtonElement> & {
+          as?: "button";
+      })
+    | (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,24 +49,36 @@ const Button = ({
     RightIcon,
     ...props
 }: ButtonProps) => {
-    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}
-        >
-            {loading ? <Spinner size="small" /> : null}
+    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
+    );
 
-            {LeftIcon && !loading ? (
-                <LeftIcon className={`${iconVariants[variant]} h-3 w-3`} />
-            ) : null}
+    const content = () => {
+        return (
+            <>
+                {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}
+            </>
+        );
+    };
 
-            {children}
+    if (props.as === "a") {
+        return (
+            <a className={commonClasses} {...props}>
+                {content()}
+            </a>
+        );
+    }
 
-            {RightIcon ? <RightIcon className={`${iconVariants[variant]} h-3 w-3`} /> : null}
+    return (
+        <button className={commonClasses} {...props}>
+            {content()}
         </button>
     );
 };