Basic Buttons

A simple, customizable button component with support for variants, sizes, and states like hover and disabled — perfect for any UI.

Variant

Defines the style variant of the component. It can be used to apply different visual styles like primary, chai, sky, etc.

Size

Adjusts the size of the component. Possible values are sdot, m, xl, allowing you to control the component's size to fit various design requirements.

Rounded

Determines if the component should have rounded corners.

Hover

Enables hover effects on the component. You can customize the hover state to define interactions when the component is hovered over.

Disabled

When set to true, this prop disables the component, preventing user interaction and visually indicating its inactive state.

CLI Installation

Before proceeding, ensure that ShadCN UI is properly installed in your project.
You can refer to the installation guide for detailed instructions.

Once ShadCN is set up, you can install the component using the CLI:

npx shadcn@latest add https://ui-chaiui.vercel.app/registry/basic-button.json

Manual Installation

To manually set up the Button component in your project, follow the steps below:

Navigate to the src directory in your project.
Create a new folder named components.
Inside the components folder, create a subfolder named ui.
Within components/ui, create a new file called basicButton.tsx.
Copy and paste the provided button component code into this file.

Once added, you can import and use the component throughout your application.

import React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { twMerge } from "tailwind-merge";
import clsx from "clsx";
 
 
const buttonVariants = cva(
  "px-4 cursor-pointer text-white font-bold rounded-lg shadow-md transition transform duration-300 hover:-translate-y-1 hover:scale-105 hover:shadow-xl",
  {
    variants: {
      variant: {
        default: "bg-gray-600",
        destructive: "bg-[#ED0800]",
        primary: "bg-teal-600",
        yellow:"bg-[#ffbd03]",
        chai:"bg-[#Ab784E]",
        lavender:"bg-[#a881af]",
        purple:"bg-[#80669d]",
        teal:"bg-[#5adbb5]",
        green:"bg-[#33b249]",
        sky:"bg-[#55c2da]",
        blue:"bg-[#5783db]",
        facebook:"bg-[#4681f4]",
        stroke:"bg-none border border-gray-800"
      },
      size: {
        sdot:"h-5 w-5",
        dot:"h-10 w-10",
        sm:"h-6 w-12",
        m:"h-10 w-20",
        default: "h-12 w-42",
        xl: "h-12 w-62",
        
      },
      rounded:{
        circle:"",
        medium:"",
        low:"",
        rectangle:"",
        high:""
      },
      hover:{
        float:"",
        shadow:"",
        slide:"",
        ring:""
      }
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);
 
type AllButtonsProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
  VariantProps<typeof buttonVariants>;
 
 
export default function Buttos({
  variant,
  size,
  className,
  ...props
}: AllButtonsProps) {
  return (
    <button
      {...props}
      className={twMerge(clsx(buttonVariants({ variant, size }), className))}
    />
  );
}

Usage

To use the Button component in your project, follow the steps below:

Import the component

import Button from "@/components/ui/buttons/basicButton";

Use the component

<Button variant="primary" size="m" rounded="medium" hover="float">
  Click Me
</Button>

Props

The Button component accepts the following props to customize its appearance and behavior:

Prop	Type	Description	Accepted Values
`variant`	`string`	Defines the button's color theme.	`"destructive"`, `"primary"`, `"yellow"`, `"chai"`, `"lavender"`, `"purple"`, `"teal"`, `"green"`, `"sky"`, `"blue"`, `"facebook"`, `"stroke"`
`size`	`string`	Sets the button size.	`"sdot"`, `"dot"`, `"sm"`, `"m"`, `"xl"`
`rounded`	`string`	Controls the border-radius shape.	`"circle"`, `"medium"`, `"low"`, `"rectangle"`, `"small"`
`hover`	`string`	Sets the hover interaction effect.	`"float"`, `"rotate"`, `"slide"`,`shadow`, `"ring"`
`hover`	`string`	Sets the hover interaction effect.	`"float"`, `"rotate"`, `"slide"`,`shadow`, `"ring"`
`className`	`string`	custom className effects	`className="string"`,

Basic Buttons

On this page