feat: button component

package.json

@@ -13,38 +13,38 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@headlessui/react": "^2.2.4",
+    "@headlessui/react": "^2.2.7",
     "motion": "^12.23.12",
-    "@hookform/resolvers": "^5.1.1",
-    "axios": "^1.10.0",
+    "@hookform/resolvers": "^5.2.1",
+    "axios": "^1.11.0",
     "clsx": "^2.1.1",
     "jwt-decode": "^4.0.0",
     "next": "15.4.5",
     "react": "19.1.1",
     "react-dom": "19.1.1",
-    "react-hook-form": "^7.60.0",
+    "react-hook-form": "^7.62.0",
     "tailwind-merge": "^3.3.1",
-    "zod": "^4.0.9",
-    "zustand": "^5.0.6"
+    "zod": "^4.0.17",
+    "zustand": "^5.0.7"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.0.1",
-    "@eslint/eslintrc": "^3",
-    "@storybook/addon-a11y": "^9.0.15",
-    "@storybook/addon-docs": "^9.0.15",
-    "@storybook/nextjs-vite": "^9.0.15",
-    "@tailwindcss/postcss": "^4",
-    "@types/node": "^20",
+    "@chromatic-com/storybook": "^4.1.0",
+    "@eslint/eslintrc": "^3.3.1",
+    "@storybook/addon-a11y": "^9.1.2",
+    "@storybook/addon-docs": "^9.1.2",
+    "@storybook/nextjs-vite": "^9.1.2",
+    "@tailwindcss/postcss": "^4.1.12",
+    "@types/node": "^20.19.11",
     "@types/react": "19.1.9",
     "@types/react-dom": "19.1.7",
-    "eslint": "^9",
+    "eslint": "^9.33.0",
     "eslint-config-next": "15.4.5",
-    "eslint-plugin-storybook": "^9.0.15",
-    "storybook": "^9.0.15",
+    "eslint-plugin-storybook": "^9.1.2",
+    "storybook": "^9.1.2",
     "prettier": "^3.6.2",
-    "prettier-plugin-tailwindcss": "^0.6.13",
-    "tailwindcss": "^4",
-    "typescript": "^5"
+    "prettier-plugin-tailwindcss": "^0.6.14",
+    "tailwindcss": "^4.1.12",
+    "typescript": "^5.9.2"
   },
   "overrides": {
     "@types/react": "19.1.9",

src/components/button.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import React, { ReactNode } from "react";
+import Link from "next/link";
+
+interface IButtonProps {
+  children?: ReactNode;
+  className?: string;
+  icon?: ReactNode;
+  iconPosition?: "left" | "right";
+  href?: string;
+  onClick?: () => void;
+  type?: "button" | "submit" | "reset";
+  ariaLabel?: string;
+  disabled?: boolean;
+}
+
+const Button = ({
+  children,
+  className = "",
+  icon,
+  iconPosition = "left",
+  href,
+  onClick,
+  type = "button",
+  ariaLabel,
+  disabled = false,
+}: IButtonProps) => {
+  const baseStyle = "inline-flex items-center justify-center font-medium";
+  const isIconOnly = icon && !children;
+  const disabledStyle = disabled ? "pointer-events-none opacity-50" : "";
+
+  const finalClassName = [baseStyle, className, disabledStyle]
+    .filter(Boolean)
+    .join(" ");
+
+  const content = isIconOnly ? (
+    <span className="flex items-center justify-center">{icon}</span>
+  ) : (
+    <>
+      {icon && iconPosition === "left" && (
+        <span className="mr-2 flex">{icon}</span>
+      )}
+
+      {children && <span>{children}</span>}
+
+      {icon && iconPosition === "right" && (
+        <span className="ml-2 flex">{icon}</span>
+      )}
+    </>
+  );
+
+  if (href) {
+    const external =
+      href.startsWith("http") ||
+      href.startsWith("mailto:") ||
+      href.startsWith("tel:");
+
+    if (disabled) {
+      return (
+        <span
+          className={finalClassName}
+          aria-label={ariaLabel}
+          aria-disabled="true"
+        >
+          {content}
+        </span>
+      );
+    }
+
+    return (
+      <Link
+        href={href}
+        className={finalClassName}
+        aria-label={ariaLabel}
+        {...(external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+      >
+        {content}
+      </Link>
+    );
+  }
+
+  return (
+    <button
+      type={type}
+      onClick={disabled ? undefined : onClick}
+      className={finalClassName}
+      aria-label={ariaLabel}
+      disabled={disabled}
+    >
+      {content}
+    </button>
+  );
+};
+
+export default Button;

src/stories/button.stories.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { MdKey, MdDownload } from "react-icons/md";
+import Button from "@/components/button";
+
+type T = typeof Button;
+
+const meta: Meta<T> = {
+  title: "Components/Button",
+  component: Button,
+  tags: ["autodocs"],
+  argTypes: {
+    iconPosition: { control: "radio", options: ["left", "right"] },
+    onClick: { action: "clicked" },
+    href: { control: "text" },
+    disabled: { control: "boolean" },
+    ariaLabel: { control: "text" },
+    icon: { control: false },
+  },
+};
+
+export default meta;
+
+export const TextAndIcon: StoryObj<T> = {
+  args: {
+    children: "Entrar",
+    onClick: () => alert("Entrar"),
+    icon: <MdDownload />,
+    iconPosition: "left",
+    className:
+      "border-black border-0 bg-gray-100 px-4 py-3 text-black rounded-full transition duration-200 ease-in-out hover:scale-105 active:scale-95",
+  },
+};
+
+export const IconOnly: StoryObj<T> = {
+  args: {
+    icon: <MdDownload />,
+    iconPosition: "right",
+    ariaLabel: "Transferir",
+    onClick: () => console.log("Transferir"),
+    className: "text-orange-500 border-0",
+  },
+};
+
+export const TextOnly: StoryObj<T> = {
+  args: {
+    children: "Editar",
+    className: "text-orange-400",
+  },
+};
+
+export const Link: StoryObj<T> = {
+  args: {
+    href: "https://github.com/cesium/astra/issues/2",
+    children: "Issue",
+    icon: <MdKey />,
+    iconPosition: "left",
+    className: "border-orange-500 text-orange-500",
+  },
+};