This bold button makes sure your users click on it and perform the actions you want! 🚀
Copynpm install class-variance-authority
npm install class-variance-authority
Copyimport { 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";
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";
Last Updated: 04 Nov, 2024