Button

Komponen tombol untuk merender tombol atau tautan

Jika kalian ingin membuat tombol, kalian bisa menggunakan komponen ini

Button.jsx

import { Twc } from "@/lib/utils";
import React, { forwardRef } from "react";
            
const baseStyles = "inline-flex items-center justify-center font-medium rounded transition-colors  disabled:opacity-50 disabled:pointer-events-none"; 

const variantClasses = {
  filed: "bg-[#0079f8] text-white hover:bg-blue-600 ",
  default: "bg-white text-gray-900 rounded-md border border-gray-300 hover:border-gray-50",
  outline:  "border bg-transparent border-gray-600 border-2 text-gray-900 rounded-md",
};

const sizeClasses = {
  sm: "px-3 py-1 text-sm",
  md: "px-4 py-2 text-base",
  lg: "px-5 py-3 text-lg",
};
            
export type ButtonProps = React.ComponentPropsWithRef<"button"> & {
  as?: React.ElementType;
  variant?: keyof typeof variantClasses;
  size?: keyof typeof sizeClasses;
  className?: string;
  children?: React.ReactNode;
};

  export const Button: React.FC<ButtonProps> = forwardRef(
    (
      {
        as: Component = "button",
        variant = "default",
        size = "md",
        className,
        children,
        ...props
      },
      ref
    ) => {
      return (
        <Component
          ref={ref}
          className={Twc(
            baseStyles,
            variantClasses[variant],
            sizeClasses[size],
            className
          )}
          {...props}
        >
          {children}
        </Component>
      );
    }
  );
  
  Button.displayName = "Button";
  

Button.jsx

const CobaButton = () => {
      return <Button variant="default"> Default </Button>;
    };

Keunggulan Table

✅ Fully typed dengan dukungan React.ComponentPropsWithRef untuk semua atribut native <button>.
🎨 TailwindCSS-ready, dengan sistem varian visual yang konsisten lewat prop variant dan size.
🔁 Polymorphic melalui prop as, sehingga bisa digunakan sebagai <a>, <div>, atau elemen lainnya dengan tampilan tombol.
🧠 Ref-friendly, mendukung penggunaan ref untuk integrasi dengan fokus manual, animasi, atau akses imperative lainnya.
💡 Kelas CSS terorganisir menggunakan helper Twc (gabungan dari clsx + twMerge), mencegah duplikasi dan konflik class.
🛡️ Reusable dan maintainable, siap digunakan dalam berbagai konteks UI baik untuk form, navigasi, maupun aksi sekunder.