Button

This bold button makes sure your users click on it and perform the actions you want! 🚀



Installation

1. Install dependencies:

npm install class-variance-authority

2. Copy the code 👇 into your project:

import { cn } from "@/lib/utils";
import { cva, VariantProps } from "class-variance-authority";
import React, { ButtonHTMLAttributes } from "react";
 
const buttonVariants = cva("font-head transition-all outline-none", {
  variants: {
    variant: {
      default:
        "shadow-md hover:shadow-xs bg-primary-400 text-black border-2 border-black hover:bg-primary-500",
      outline:
        "shadow-md hover:shadow-xs bg-transparent text-black border-2 border-black",
      link: "bg-transparent text-black hover:underline",
    },
    size: {
      sm: "px-4 py-1 text-sm",
      md: "px-6 py-2 text-base",
      lg: "px-8 py-3 text-lg",
    },
  },
  defaultVariants: {
    size: "md",
    variant: "default",
  },
});
 
export interface IButtonProps
  extends ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}
 
export const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(
  (
    {
      children,
      size = "md",
      className = "",
      variant = "default",
      ...props
    }: IButtonProps,
    forwardedRef
  ) => (
    <button
      ref={forwardedRef}
      className={cn(buttonVariants({ variant, size }), className)}
      {...props}
    >
      {children}
    </button>
  )
);
 
Button.displayName = "Button";


Examples

Default



Outline



Last Updated: 04 Nov, 2024