Buttons

The following single button component is a versatile component allowing you to define your own variants, sizes, styles and more. With a pretty good setup out-of-the-box. If required you can style it however you need to for you own needs via className.

Dependencies

No extra libraries required. Assuming you have Tailwind CSS installed

Usage

App.jsx

// App.jsx
import React, { useState } from 'react';
import Button from './components/button'

const App = () => {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return (
    <div className="p-4">
      <h1 className="text-xl mb-4">Button Component Example</h1>
      <Button onClick={handleClick} variant="primary" size="medium" className="mr-2">
        Primary Button
      </Button>
      <Button onClick={handleClick} variant="secondary" size="medium" className="mr-2">
        Secondary Button
      </Button>
      <Button onClick={handleClick} variant="danger" size="medium" className="mr-2">
        Danger Button
      </Button>
      <Button disabled size="medium" className="mr-2">
        Disabled Button
      </Button>
    </div>
  );
};

export default App;

Component

buttons.jsx

// Button.jsx
import React from 'react';

const Button = ({
  children,
  onClick,
  className = '',
  variant = 'primary',
  size = 'medium',
  disabled = false,
}) => {
  const baseStyles = 'px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-offset-2 transition';
  const variants = {
    primary: 'bg-blue-500 text-white hover:bg-blue-600',
    secondary: 'bg-gray-500 text-white hover:bg-gray-600',
    danger: 'bg-red-500 text-white hover:bg-red-600',
    // For more
  };

  const sizes = {
    small: 'text-sm',
    medium: 'text-base',
    large: 'text-lg',
  };

  return (
    <button
      onClick={onClick}
      className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`}
      disabled={disabled}
    >
      {children}
    </button>
  );
};

export default Button;

Preview