Button Styles Overridden by Shadcn Components - button needs customusation

[ibtissammassa]

When adding a new component from the Shadcn, the button styles are being overridden. Currently, the buttons appear with default styles that do not match our project's colors, they lack functionalities such as being clickable and linkable.

Desired Behavior:

• Customize button styles to match our project's color scheme.
• Ensure buttons are clickable.
• Provide the ability to add a link to buttons.

[ibtissammassa]

I've created a folder called extension inside Components/ui where I've moved the button component. Within this folder, I applied the necessary customizations (changing the default color variant and adding an href prop to make the button linkable).

// File: Components/ui/extension/Button.jsx

import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva } from "class-variance-authority";
import Link from "next/link";

import { cn } from "@/lib/utils";

const buttonVariants = cva(
  // Customized button styles here...
);

const Button = React.forwardRef(({ className, variant, size, asChild = false, href, ...props }, ref) => {
  const Comp = asChild ? Slot : href ? Link : "button"; //whenever we add an href prop we turn this into a link
  return (
    <Comp
      className={cn(buttonVariants({ variant, size, className }))}
      ref={ref}
      {...(href ? { href } : {})} //we add the href prop to the link 
      {...props}
    />
  );
});
Button.displayName = "Button";

export { Button, buttonVariants };

Now whenever we want to customize a Shadcn component, we can copy the component into the extension folder. This way, Shadcn won't override our changes because we're using our own customized version of the component.

I implemended the same approach from : https://shadcn-extension-landing.vercel.app/docs/introduction

Looking for feedback:

If you have any suggestions for improving this approach or if you see a better way to handle the issue, please feel free to share