Button Component with CVA and Tailwind

Hello all Web developers and engineers, today i will be discussing about the CVA(class variance authority) and how we can use it to create reusable components in React/Next JS with multiple variants and stylings.

Existing problem

Suppose you are creating a button component for your website created with React/Next JS. Let's say you have 9 different types of buttons and each button has some addition stylings like border, gradients, border roundness, etc. In this scenario, we could pass the css class names having those styles as a prop to the component and render the button styles based on it or could use an object with key value pairs to map the button stylings based on the prop passed for the button styles. But it would not be readable, easy to manage and better code practices. To solve this type of issue, we have the CVA library.

How CVA helps us to solve the above issue?

CVA allows to create configuration for the styles in a JSON format where we can pass our styles like variants with multiple combinations. We can use naming conventions for those variants like primary, secondary, tertiary. The best part of this library is that it allows us to pass the variants as a prop. For example, if we have created 3 button variants, let's say primary, secondary, tertiary and named this variant property as "flavour", then we could pass this flavour with the value from those 3 values as a prop to the button component. It will be more readable, easy to manage and follows good coding practices.

Code example -

Imports

import { cva } from "class-variance-authority";

Typescript types (For typescript based components

// intent will be used as a prop which will only accepts these // values
type intent = "primary" | "warning" | "danger" | "inverse" | "success" | "purple" | "default";

type ButtonVariantsProps = {
  intent?: Intent;
// could pass types for other things as variants like size, roundness, border
}

// Combining the button variant props along with other props
// the button component will accept like children, custom 
// class names and rest of the props.
type ButtonProps = ButtonVariantsProps & {
  customClassNames?: string;
  children: React.ReactNode;
  [key: string]: any;
}

// This will be used to check the types we will pass for the 
// configuration created by cva() method
type ButtonVariantsFunction = (props: ButtonVariantsProps) => string;

Styling configuration with variants

Here we are using tailwind css classess to styles our button variants, you could use your custom css classes as well.

const ButtonVariants: ButtonVariantsFunction = cva(
  /* button base style, default for all variants */
  "transition-colors duration-150 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none",
  {
  variants: {
     intent: {
        primary:
          "bg-blue-600 hover:bg-blue-700 text-blue-100 hover:text-white",
        warning:
          "bg-yellow-500 hover:bg-yellow-600 text-orange-100 hover:text-white",
        danger:
          "bg-red-500 hover:bg-red-600 text-orange-100 hover:text-white",
        inverse:
          "bg-gray-600 hover:bg-gray-700 text-blue-100 hover:text-white",
        success:
          "bg-green-600 hover:bg-green-700 text-teal-100 hover:text-white",
        purple:
          "bg-indigo-700 hover:bg-indigo-800 text-white",
        default:
          "bg-gray-500 hover:bg-gray-600",
      },
   },

   defaultVariants: {
      intent: "default", // will be used if we won't pass any prop for intent
    },
 }
);

Exporting Button Component

export default function Button({
  intent, 
  customClassNames = "", 
  children, 
  ...props 
}: ButtonProps): JSX.Element {
  return (
    <button className={`${ButtonVariants({ intent})} ${customClassNames}`} {...props}>{children}</button>
  )
}

• We are calling our ButtonVariants method here and passing an object inside it with variant property "intent" we have created in configuration, along with it we have also passed customClassNames, which we can pass as a prop if we want and finally using the spread operator, we have spread the rest of the props.

Component Usage

"use client"
import React from "react";
import Button from "@/components/Button"; // update this according to your project structure

const ButtonRender = () => {
  return (
    <>
      <div>
        <h1 className="text-center text-xl mb-10">Button variants</h1>

        <div className="mb-12">
          <h2 className="text-center mb-8">Flavours</h2>
          <div className="flex flex-wrap gap-6 justify-center items-center">
            <Button intent="primary" onClick={() => console.log("Primary")}>Primary</Button>
            <Button intent="success">Success</Button>
            <Button intent="warning">Warning</Button>
            <Button intent="danger">Danger</Button>
            <Button intent="inverse">Inverse</Button>
            <Button intent="purple">Purple</Button>
          </div>
        </div>
      </div>
    </>
  );
};

Now we have 7 different variants of button to use, also you can see we are passing the intent as a prop to our button component and also passing onClick event handler, which will be added in rest of the props

Live preview of the button variants - Preview

Feel free to give suggestions in comments

THANK YOU FOR CHECKING THIS POST
You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - [e-mail]

You can help me with some donation at the link below Thank you👇👇
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well

CSS | Trigonometry Circle

Shubham Tiwari ・ Sep 19 '23

#html #css #webdev #tutorial

Next JS | Multi-Step Form

Shubham Tiwari ・ Sep 11 '23

#react #javascript #webdev #nextjs

React Components | Gallary

Shubham Tiwari ・ Sep 6 '23

#react #javascript #webdev #tutorial

React interactive Components | Tabs

Shubham Tiwari ・ Sep 2 '23

#webdev #react #javascript #tutorial