feat: button v2

apps/web/app/(app)/environments/[environmentId]/components/Navigation.tsx

@@ -18,7 +18,7 @@ import {
   UsersIcon,
 } from "@heroicons/react/24/solid";
 import clsx from "clsx";
-import { MenuIcon } from "lucide-react";
+import { ArrowLeftIcon, ArrowRightIcon, MenuIcon } from "lucide-react";
 import type { Session } from "next-auth";
 import { signOut } from "next-auth/react";
 import Image from "next/image";
@@ -54,6 +54,7 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from "@formbricks/ui/Popover";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui/Tooltip";
 import { CustomersIcon, DashboardIcon, FilterIcon, FormIcon, SettingsIcon } from "@formbricks/ui/icons";
+import { ButtonV2 } from "@formbricks/ui/v2/Button";
 
 import AddProductModal from "./AddProductModal";
 import UrlShortenerModal from "./UrlShortenerModal";
@@ -245,6 +246,20 @@ export default function Navigation({
             </div>
           )}
 
+          <div className="m-16">
+            <ButtonV2 size="sm" className="mr-4" StartIcon={ArrowLeftIcon} EndIcon={ArrowRightIcon}>
+              Hello World
+            </ButtonV2>
+
+            <ButtonV2 size="base" className="mr-4" StartIcon={ArrowLeftIcon} EndIcon={ArrowRightIcon}>
+              Hello World
+            </ButtonV2>
+
+            <ButtonV2 size="lg" StartIcon={ArrowLeftIcon} EndIcon={ArrowRightIcon} noShadow>
+              Hello World
+            </ButtonV2>
+          </div>
+
           <div className="w-full px-4 sm:px-6">
             <div className="flex h-14 justify-between">
               <div className="flex space-x-4 py-2">

packages/tailwind-config/tailwind.config.js

@@ -17,6 +17,12 @@ module.exports = {
       backgroundImage: {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
       },
+      boxShadow: {
+        "brand-shadow-sm": "3px 3px #0381782A",
+        "brand-shadow-base": "4px 4px #0381782A",
+        "brand-shadow-lg": "6px 6px #0381782A",
+        "focus-shadow": "0px 0px 10px 0px red",
+      },
       colors: {
         brand: {
           DEFAULT: "#00E6CA",

packages/ui/v2/Button/index.tsx

@@ -17,6 +17,7 @@ export type ButtonBaseProps = {
   EndIcon?: SVGComponent | React.ComponentType<React.ComponentProps<"svg">>;
   endIconClassName?: string;
   shallow?: boolean;
+  noShadow?: boolean;
 };
 type ButtonBasePropsWithTarget = ButtonBaseProps & { target?: string };
 
@@ -26,7 +27,7 @@ export type ButtonProps = ButtonBasePropsWithTarget &
     | (Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "target"> & { href?: never })
   );
 
-export const Button: React.ForwardRefExoticComponent<
+export const ButtonV2: React.ForwardRefExoticComponent<
   React.PropsWithoutRef<ButtonProps> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>
 > = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonProps>(function Button(
   props: ButtonProps,
@@ -41,6 +42,7 @@ export const Button: React.ForwardRefExoticComponent<
     endIconClassName,
     EndIcon,
     shallow,
+    noShadow,
     // attributes propagated from `HTMLAnchorProps` or `HTMLButtonProps`
     ...passThroughProps
   } = props;
@@ -61,9 +63,15 @@ export const Button: React.ForwardRefExoticComponent<
         // base styles independent what type of button it is
         "inline-flex items-center appearance-none",
         // different styles depending on size
-        size === "sm" && "px-3 py-2 text-sm leading-4 font-medium rounded-md",
-        size === "base" && "px-6 py-3 text-sm font-medium rounded-md",
-        size === "lg" && "px-4 py-2 text-base font-medium rounded-md",
+        size === "sm" &&
+          cn(
+            "px-4 py-3 text-base leading-4 font-medium rounded-lg shadow-brand-shadow-sm",
+            noShadow && "shadow-none"
+          ),
+        size === "base" &&
+          cn("px-8 py-4 text-lg font-medium rounded-xl shadow-brand-shadow-base", noShadow && "shadow-none"),
+        size === "lg" &&
+          cn("px-12 py-6 text-xl font-medium rounded-xl shadow-brand-shadow-lg", noShadow && "shadow-none"),
         size === "icon" &&
           "w-10 h-10 justify-center group p-2 border rounded-lg border-transparent text-neutral-400 hover:border-slate-200 transition",
         // turn button into a floating action button (fab)
@@ -78,7 +86,7 @@ export const Button: React.ForwardRefExoticComponent<
         variant === "primary" &&
           (disabled
             ? "border border-transparent bg-slate-400 text-white"
-            : "text-white bg-brand-dark hover:bg-brand focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-slate-900"),
+            : "text-white bg-brandnew hover:bg-gradient-to-b hover:from-black/20 hover:to-black/20 hover:shadow-none focus:outline-none focus:ring focus:ring-offset-4 focus:ring-focus active:bg-gradient-to-b active:from-white/20 active:to-white/20 active:shadow-none"),
 
         variant === "minimal" &&
           (disabled
@@ -117,7 +125,10 @@ export const Button: React.ForwardRefExoticComponent<
         <StartIcon
           className={cn(
             "flex",
-            size === "icon" ? "h-4 w-4 " : "-ml-1 mr-1 h-3 w-3",
+            // size === "icon" ? "h-4 w-4 " : "h-3 w-3",
+            size === "sm" && "mr-1 h-4 w-4",
+            size === "base" && "mr-3 h-6 w-6",
+            size === "lg" && "mr-4 h-8 w-8",
             startIconClassName || ""
           )}
         />
@@ -142,7 +153,17 @@ export const Button: React.ForwardRefExoticComponent<
           </svg>
         </div>
       )}
-      {EndIcon && <EndIcon className={cn("-mr-1 ml-2 inline h-5 w-5 rtl:mr-2", endIconClassName || "")} />}
+      {EndIcon && (
+        <EndIcon
+          className={cn(
+            // "inline h-5 w-5",
+            size === "sm" && "ml-1 h-4 w-4",
+            size === "base" && "ml-3 h-6 w-6",
+            size === "lg" && "ml-4 h-8 w-8",
+            endIconClassName || ""
+          )}
+        />
+      )}
     </>
   );
   return props.href ? (

packages/ui/v2/Button/stories.ts

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Button } from "./index";
+import { ButtonV2 } from "./index";
 
 const meta = {
   title: "Button",
-  component: Button,
+  component: ButtonV2,
   tags: ["autodocs"],
   argTypes: {
     variant: {
@@ -14,7 +14,7 @@ const meta = {
     size: { control: "select", options: ["base", "sm", "lg", "fab", "icon"] },
     onClick: { action: "clicked", type: "function" },
   },
-} satisfies Meta<typeof Button>;
+} satisfies Meta<typeof ButtonV2>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;