React & Tailwind CSS - Reusable Button Component

Share this:

In this section, we’ll build a reusable button component with react js and tailwind CSS 3. You must first install setup react with tailwind css. You can comment on the article below.

First you need to create Button.jsx component.

Components/Button.jsx

import React from 'react';

export default function Button({
  type = 'submit',
  className = '',
  processing,
  children,
}) {
  return (
    <button
      type={type}
      className={
        `inline-flex items-center px-4 py-2 bg-gray-900 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest active:bg-gray-900 transition ease-in-out duration-150 ${
          processing && 'opacity-25'
        } ` + className
      }
      disabled={processing}
    >
      {children}
    </button>
  );
}

Now you can import Button Component and use anywhere.

Also Read : How to Create & Use Component in Angular 13 App

App.jsx

import Button from './Components/Button';

function App() {
  return (
    <div className="flex items-center justify-center h-screen">
      <div className="flex gap-x-4">
        <Button>Button</Button>
        <Button className="bg-red-600">Button</Button>
        <Button className="bg-green-600">Button</Button>
        <Button className="bg-purple-600">Button</Button>
        <Button className="bg-cyan-600">Button</Button>
      </div>
    </div>
  );
}

export default App;