chore: added shadcn button (#4392)

Co-authored-by: Matti Nannt <mail@matthiasnannt.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

apps/web/modules/ui/components/alert-dialog/index.tsx

@@ -11,7 +11,7 @@ interface AlertDialogProps {
   mainText: string;
   confirmBtnLabel: string;
   declineBtnLabel?: string;
-  declineBtnVariant?: "warn" | "minimal";
+  declineBtnVariant?: "destructive" | "ghost";
   onDecline: () => void;
   onConfirm?: () => void;
 }
@@ -24,7 +24,7 @@ export const AlertDialog = ({
   declineBtnLabel,
   onDecline,
   confirmBtnLabel,
-  declineBtnVariant = "minimal",
+  declineBtnVariant = "ghost",
   onConfirm,
 }: AlertDialogProps) => {
   const t = useTranslations();

apps/web/modules/ui/components/button/index.tsx

@@ -1,188 +1,67 @@
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";
-import { LucideIcon } from "lucide-react";
-import Link, { LinkProps } from "next/link";
-import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef } from "react";
-import { cn } from "@formbricks/lib/cn";
+import { cn } from "@/modules/ui/lib/utils";
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
+import * as React from "react";
 
-type SVGComponent = React.FunctionComponent<React.SVGProps<SVGSVGElement>> | LucideIcon;
-
-export type ButtonBaseProps = {
-  variant?: "highlight" | "primary" | "secondary" | "minimal" | "warn" | "alert";
-  size?: "base" | "sm" | "lg" | "fab" | "icon";
-  loading?: boolean;
-  disabled?: boolean;
-  onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-  StartIcon?: SVGComponent | React.ComponentType<React.ComponentProps<"svg">>;
-  startIconClassName?: string;
-  EndIcon?: SVGComponent | React.ComponentType<React.ComponentProps<"svg">>;
-  endIconClassName?: string;
-  shallow?: boolean;
-  tooltip?: string;
-  tooltipSide?: "top" | "right" | "bottom" | "left";
-  tooltipOffset?: number;
-};
-type ButtonBasePropsWithTarget = ButtonBaseProps & { target?: string };
-
-export type ButtonProps = ButtonBasePropsWithTarget &
-  (
-    | (Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "onClick" | "target"> & LinkProps)
-    | (Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "target"> & { href?: never })
-  );
-
-export const Button: React.ForwardRefExoticComponent<
-  React.PropsWithoutRef<ButtonProps> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>
-> = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonProps>((props: ButtonProps, forwardedRef) => {
-  const {
-    loading = false,
-    variant = "primary",
-    size = "sm",
-    StartIcon,
-    startIconClassName,
-    endIconClassName,
-    EndIcon,
-    shallow,
-    tooltipSide = "top",
-    tooltipOffset = 4,
-    // attributes propagated from `HTMLAnchorProps` or `HTMLButtonProps`
-    ...passThroughProps
-  } = props;
-  // Buttons are **always** disabled if we're in a `loading` state
-  const disabled = props.disabled || loading;
-
-  // If pass an `href`-attr is passed it's `<a>`, otherwise it's a `<button />`
-  const isLink = typeof props.href !== "undefined";
-  const elementType = isLink ? "span" : "button";
-
-  const element: any = React.createElement(
-    elementType,
-    {
-      ...passThroughProps,
-      disabled,
-      ref: forwardedRef,
-      className: cn(
-        // 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-8 py-4 text-base font-medium rounded-md",
-        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)
-        size === "fab" ? "fixed" : "relative",
-        size === "fab" && "justify-center bottom-20 right-8 rounded-full p-4 w-14 h-14",
-
-        // different styles depending on variant
-        variant === "highlight" &&
-          (disabled
-            ? "border border-transparent bg-slate-400 text-white"
-            : "text-white bg-brand-dark focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-slate-900 transition ease-in-out delay-50 hover:scale-105"),
-        variant === "primary" &&
-          (disabled
-            ? "text-slate-400 dark:text-slate-500 bg-slate-200 dark:bg-slate-800"
-            : "text-slate-100 hover:text-slate-50 bg-gradient-to-br from-slate-900 to-slate-800 hover:from-slate-800 hover:to-slate-700 dark:text-slate-300 focus:outline-none focus:ring-2 focus:ring-offset-1  focus:bg-slate-700 focus:ring-neutral-500"),
-
-        variant === "minimal" &&
-          (disabled
-            ? "border border-slate-200 text-slate-400"
-            : "hover:text-slate-600 text-slate-700 border border-transparent focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900 dark:text-slate-700 dark:hover:text-slate-500"),
-        variant === "alert" &&
-          (disabled
-            ? "border border-transparent bg-slate-400 text-white"
-            : "border border-transparent dark:text-darkmodebrandcontrast text-brandcontrast bg-red-600 dark:bg-darkmodebrand hover:bg-opacity-90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900"),
-        variant === "secondary" &&
-          (disabled
-            ? "text-slate-400 dark:text-slate-500 bg-slate-200 dark:bg-slate-800"
-            : "text-slate-600 hover:text-slate-500 bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-offset-1  focus:bg-slate-300 focus:ring-neutral-500"),
-        variant === "warn" &&
-          (disabled
-            ? "text-slate-400 bg-transparent"
-            : "hover:bg-red-200 text-red-700 bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-red-50 focus:ring-red-500"),
-
-        // set not-allowed cursor if disabled
-        loading ? "cursor-wait" : disabled ? "cursor-not-allowed" : "",
-        props.className
-      ),
-      // if we click a disabled button, we prevent going through the click handler
-      onClick: disabled
-        ? (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
-            e.preventDefault();
-          }
-        : props.onClick,
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+      loading: {
+        true: "cursor-not-allowed opacity-50",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      loading: false,
     },
-    <>
-      {StartIcon && (
-        <StartIcon
-          className={cn("flex", size === "icon" ? "h-4 w-4" : "-ml-1 mr-1 h-3 w-3", startIconClassName || "")}
-        />
-      )}
-      {props.children}
-      {loading && (
-        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
-          <svg
-            className={cn(
-              "mx-4 h-5 w-5 animate-spin",
-              variant === "primary" || variant === "secondary"
-                ? "text-white dark:text-slate-900"
-                : "text-slate-900"
-            )}
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24">
-            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-            <path
-              className="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            />
-          </svg>
-        </div>
-      )}
-      {EndIcon && <EndIcon className={cn("-mr-1 ml-2 inline h-4 w-4 rtl:mr-2", endIconClassName || "")} />}
-    </>
-  );
-  return (
-    <Wrapper
-      data-testid="wrapper"
-      tooltip={props.tooltip}
-      tooltipSide={tooltipSide}
-      tooltipOffset={tooltipOffset}>
-      {props.href ? (
-        <Link passHref href={props.href} shallow={shallow && shallow} target={props.target || "_self"}>
-          {element}
-        </Link>
-      ) : (
-        element
-      )}
-    </Wrapper>
-  );
-});
-
-const Wrapper = ({
-  children,
-  tooltip,
-  tooltipSide = "top",
-  tooltipOffset = 0,
-}: {
-  tooltip?: string;
-  children: React.ReactNode;
-  tooltipSide?: "top" | "right" | "bottom" | "left";
-  tooltipOffset?: number;
-}) => {
-  if (!tooltip) {
-    return <>{children}</>;
   }
+);
 
-  return (
-    <TooltipProvider delayDuration={0}>
-      <Tooltip>
-        <TooltipTrigger asChild>{children}</TooltipTrigger>
-        <TooltipContent side={tooltipSide} sideOffset={tooltipOffset}>
-          {tooltip}
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-};
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  loading?: boolean;
+}
 
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, loading, asChild = false, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, loading, className }))}
+        disabled={loading}
+        ref={ref}
+        {...props}>
+        {loading ? (
+          <>
+            <Loader2 className="animate-spin" />
+            {children}
+          </>
+        ) : (
+          children
+        )}
+      </Comp>
+    );
+  }
+);
 Button.displayName = "Button";
+
+export { Button, buttonVariants };

apps/web/modules/ui/components/button/stories.ts

@@ -13,9 +13,9 @@ const meta = {
   argTypes: {
     variant: {
       control: "select",
-      options: ["highlight", "primary", "secondary", "minimal", "warn", "alert"],
+      options: ["outline", "default", "secondary", "ghost", "destructive", "link"],
     },
-    size: { control: "select", options: ["base", "sm", "lg", "fab", "icon"] },
+    size: { control: "select", options: ["sm", "lg", "fab", "icon"] },
   },
   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
   args: { onClick: fn() },
@@ -28,7 +28,7 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = {
   args: {
     children: "Button",
-    variant: "primary",
+    variant: "default",
   },
 };
 
@@ -42,35 +42,21 @@ export const Secondary: Story = {
 export const Minimal: Story = {
   args: {
     children: "Button",
-    variant: "minimal",
-  },
-};
-
-export const Highlight: Story = {
-  args: {
-    children: "Button",
-    variant: "highlight",
+    variant: "ghost",
   },
 };
 
 export const Warn: Story = {
   args: {
     children: "Button",
-    variant: "warn",
-  },
-};
-
-export const Alert: Story = {
-  args: {
-    children: "Button",
-    variant: "alert",
+    variant: "destructive",
   },
 };
 
 export const Loading: Story = {
   args: {
     children: "Button",
-    variant: "primary",
+    variant: "default",
     loading: true,
   },
 };

apps/web/modules/ui/components/confirm-delete-segment-modal/index.tsx

@@ -50,10 +50,10 @@ export const ConfirmDeleteSegmentModal = ({
       </div>
 
       <div className="mt-4 space-x-2 text-right">
-        <Button variant="minimal" onClick={() => setOpen(false)}>
+        <Button variant="ghost" onClick={() => setOpen(false)}>
           {t("common.cancel")}
         </Button>
-        <Button variant="warn" onClick={handleDelete} disabled={segmentHasSurveys}>
+        <Button variant="destructive" onClick={handleDelete} disabled={segmentHasSurveys}>
           {t("common.delete")}
         </Button>
       </div>

apps/web/modules/ui/components/confirmation-modal/index.tsx

@@ -11,7 +11,7 @@ type ConfirmationModalProps = {
   text: string;
   buttonText: string;
   isButtonDisabled?: boolean;
-  buttonVariant?: "warn" | "primary";
+  buttonVariant?: "destructive" | "default";
   buttonLoading?: boolean;
   closeOnOutsideClick?: boolean;
   hideCloseButton?: boolean;
@@ -25,7 +25,7 @@ export const ConfirmationModal = ({
   text,
   buttonText,
   isButtonDisabled = false,
-  buttonVariant = "warn",
+  buttonVariant = "destructive",
   buttonLoading = false,
   closeOnOutsideClick = true,
   hideCloseButton,
@@ -48,7 +48,7 @@ export const ConfirmationModal = ({
       </div>
 
       <div className="mt-4 space-x-2 text-right">
-        <Button variant="minimal" onClick={() => setOpen(false)}>
+        <Button variant="ghost" onClick={() => setOpen(false)}>
           {t("common.cancel")}
         </Button>
         <Button

apps/web/modules/ui/components/custom-dialog/index.tsx

@@ -47,7 +47,7 @@ export const CustomDialog = ({
           }}>
           {cancelBtnText || t("common.cancel")}
         </Button>
-        <Button variant="warn" onClick={onOk} loading={isLoading} disabled={disabled}>
+        <Button variant="destructive" onClick={onOk} loading={isLoading} disabled={disabled}>
           {okBtnText || t("common.yes")}
         </Button>
       </div>

apps/web/modules/ui/components/date-picker/index.tsx

@@ -56,7 +56,7 @@ export const DatePicker = ({ date, updateSurveyDate }: DatePickerProps) => {
       <PopoverTrigger asChild>
         {formattedDate ? (
           <Button
-            variant={"minimal"}
+            variant={"ghost"}
             className={cn(
               "w-[280px] justify-start border border-slate-300 bg-white text-left font-normal transition-all ease-in hover:bg-slate-300",
               !formattedDate && "text-muted-foreground bg-slate-800"
@@ -67,7 +67,7 @@ export const DatePicker = ({ date, updateSurveyDate }: DatePickerProps) => {
           </Button>
         ) : (
           <Button
-            variant={"minimal"}
+            variant={"ghost"}
             className={cn(
               "w-[280px] justify-start border border-slate-300 bg-white text-left font-normal hover:bg-slate-300",
               !formattedDate && "text-muted-foreground"

apps/web/modules/ui/components/delete-dialog/index.tsx

@@ -48,7 +48,7 @@ export const DeleteDialog = ({
           }}>
           {useSaveInsteadOfCancel ? t("common.save") : t("common.cancel")}
         </Button>
-        <Button variant="warn" onClick={onDelete} loading={isDeleting} disabled={disabled}>
+        <Button variant="destructive" onClick={onDelete} loading={isDeleting} disabled={disabled}>
           {t("common.delete")}
         </Button>
       </div>

apps/web/modules/ui/components/editor/components/toolbar-plugin.tsx

@@ -476,7 +476,6 @@ export const ToolbarPlugin = (props: TextEditorProps & { container: HTMLElement
                   return (
                     <DropdownMenuItem key={key}>
                       <Button
-                        color="minimal"
                         type="button"
                         onClick={() => format(key)}
                         className={cn(
@@ -499,38 +498,35 @@ export const ToolbarPlugin = (props: TextEditorProps & { container: HTMLElement
         <>
           {!props.excludedToolbarItems?.includes("bold") && (
             <Button
-              color="minimal"
-              variant="minimal"
+              variant="ghost"
               type="button"
-              StartIcon={Bold}
               onClick={() => {
                 editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
               }}
-              className={isBold ? "bg-subtle active-button" : "inactive-button"}
-            />
+              className={isBold ? "bg-subtle active-button" : "inactive-button"}>
+              <Bold />
+            </Button>
           )}
           {!props.excludedToolbarItems?.includes("italic") && (
             <Button
-              color="minimal"
-              variant="minimal"
+              variant="ghost"
               type="button"
-              StartIcon={Italic}
               onClick={() => {
                 editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
               }}
-              className={isItalic ? "bg-subtle active-button" : "inactive-button"}
-            />
+              className={isItalic ? "bg-subtle active-button" : "inactive-button"}>
+              <Italic />
+            </Button>
           )}
           {!props.excludedToolbarItems?.includes("link") && (
             <>
               <Button
-                color="minimal"
-                variant="minimal"
+                variant="ghost"
                 type="button"
-                StartIcon={Link}
                 onClick={insertLink}
-                className={isLink ? "bg-subtle active-button" : "inactive-button"}
-              />
+                className={isLink ? "bg-subtle active-button" : "inactive-button"}>
+                <Link />
+              </Button>
               {isLink &&
                 createPortal(<FloatingLinkEditor editor={editor} />, props.container ?? document.body)}{" "}
             </>

apps/web/modules/ui/components/go-back-button/index.tsx

@@ -12,7 +12,6 @@ export const GoBackButton = ({ url }: { url?: string }) => {
     <Button
       size="sm"
       variant="secondary"
-      StartIcon={ArrowLeftIcon}
       onClick={() => {
         if (url) {
           router.push(url);
@@ -20,6 +19,7 @@ export const GoBackButton = ({ url }: { url?: string }) => {
         }
         router.back();
       }}>
+      <ArrowLeftIcon />
       {t("common.back")}
     </Button>
   );

apps/web/modules/ui/components/iconbar/index.tsx

@@ -1,3 +1,4 @@
+import { TooltipRenderer } from "@/modules/ui/components/tooltip";
 import { LucideIcon } from "lucide-react";
 import { Button } from "../button";
 
@@ -25,15 +26,16 @@ export const IconBar = ({ actions }: IconBarProps) => {
         .filter((action) => action.isVisible)
         .map((action, index) => (
           <span key={`${action.tooltip}-${index}`}>
-            <Button
-              variant="minimal"
-              className="border-none hover:bg-slate-50"
-              size="icon"
-              StartIcon={action.icon}
-              tooltip={action.tooltip}
-              onClick={action.onClick}
-              aria-label={action.tooltip}
-            />
+            <TooltipRenderer tooltipContent={action.tooltip}>
+              <Button
+                variant="ghost"
+                className="border-none hover:bg-slate-50"
+                size="icon"
+                onClick={action.onClick}
+                aria-label={action.tooltip}>
+                <action.icon />
+              </Button>
+            </TooltipRenderer>
           </span>
         ))}
     </div>

apps/web/modules/ui/components/integration-card/index.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Button } from "@/modules/ui/components/button";
+import Link from "next/link";
 
 interface CardProps {
   connectText?: string;
@@ -55,18 +56,17 @@ export const Card: React.FC<CardProps> = ({
     <p className="text-xs text-slate-500">{description}</p>
     <div className="mt-4 flex space-x-2">
       {connectHref && (
-        <Button disabled={disabled} href={connectHref} target={connectNewTab ? "_blank" : "_self"} size="sm">
-          {connectText}
+        <Button disabled={disabled} size="sm">
+          <Link href={connectHref} target={connectNewTab ? "_blank" : "_self"}>
+            {connectText}
+          </Link>
         </Button>
       )}
       {docsHref && (
-        <Button
-          disabled={disabled}
-          href={docsHref}
-          target={docsNewTab ? "_blank" : "_self"}
-          size="sm"
-          variant="secondary">
-          {docsText}
+        <Button disabled={disabled} size="sm" variant="secondary">
+          <Link href={docsHref} target={docsNewTab ? "_blank" : "_self"}>
+            {docsText}
+          </Link>
         </Button>
       )}
     </div>

apps/web/modules/ui/components/reset-progress-button/index.tsx

@@ -11,8 +11,8 @@ export const ResetProgressButton = ({ onClick }: ResetProgressButtonProps) => {
   return (
     <Button
       type="button"
-      variant="minimal"
-      className="mr-2 bg-white px-2 py-0 font-sans text-sm text-slate-500"
+      variant="ghost"
+      className="mr-2 h-fit bg-white px-2 py-0 font-sans text-sm text-slate-500"
       onClick={onClick}>
       {t("common.restart")}
       <Repeat2 className="ml-2 h-4 w-4" />

apps/web/modules/ui/components/save-as-new-segment-modal/index.tsx

@@ -180,7 +180,7 @@ export const SaveAsNewSegmentModal = ({
             <div className="flex space-x-2">
               <Button
                 type="button"
-                variant="minimal"
+                variant="ghost"
                 onClick={() => {
                   handleReset();
                 }}>

apps/web/modules/ui/components/tooltip/index.tsx

@@ -45,7 +45,9 @@ export const TooltipRenderer = (props: TooltipRendererProps) => {
     return (
       <TooltipProvider delayDuration={0}>
         <Tooltip>
-          <TooltipTrigger className={triggerClass}>{children}</TooltipTrigger>
+          <TooltipTrigger asChild>
+            <span className={triggerClass}>{children}</span>
+          </TooltipTrigger>
           <TooltipContent className={className}>{tooltipContent}</TooltipContent>
         </Tooltip>
       </TooltipProvider>

apps/web/modules/ui/components/upgrade-prompt/index.tsx

@@ -1,4 +1,5 @@
 import { Button } from "@/modules/ui/components/button";
+import Link from "next/link";
 
 export type ModalButton = {
   text: string;
@@ -24,19 +25,26 @@ export const UpgradePrompt = ({ icon, title, description, buttons }: UpgradeProm
         <p className="text-sm text-slate-500">{description}</p>
       </div>
       <div className="flex gap-3">
-        <Button
-          {...(primaryButton.href
-            ? { href: primaryButton.href, target: "_blank", rel: "noopener noreferrer" }
-            : { onClick: primaryButton.onClick })}>
-          {primaryButton.text}
-        </Button>
-        <Button
-          variant="secondary"
-          {...(primaryButton.href
-            ? { href: primaryButton.href, target: "_blank", rel: "noopener noreferrer" }
-            : { onClick: primaryButton.onClick })}>
-          {secondaryButton.text}
-        </Button>
+        {primaryButton.href ? (
+          <Button asChild>
+            <Link href={primaryButton.href} target="_blank" rel="noopener noreferrer">
+              {primaryButton.text}
+            </Link>
+          </Button>
+        ) : (
+          <Button onClick={primaryButton.onClick}>{primaryButton.text}</Button>
+        )}
+        {secondaryButton.href ? (
+          <Button variant="secondary" asChild>
+            <Link href={secondaryButton.href} target="_blank" rel="noopener noreferrer">
+              {secondaryButton.text}
+            </Link>
+          </Button>
+        ) : (
+          <Button variant="secondary" onClick={secondaryButton.onClick}>
+            {secondaryButton.text}
+          </Button>
+        )}
       </div>
     </div>
   );