Button Group

The following button group component is a single component which is generically used to group buttons. It is a great component to use if you want to group buttons together. You can style it in place via Tailwind and className, also you may define direction and spacing in place wherever you may use it.

Dependencies

No extra libraries needed. Assuming you have Tailwind CSS installed

Usage

App.jsx

// App.jsx
import React from 'react';
import ButtonGroup from './components/ButtonGroup';

const App = () => {
  return (
    <div className="p-4">
      {/* Row Direction */}
      <ButtonGroup className="mb-4">
        <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition">Button 1</button>
        <button className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition">Button 2</button>
        <button className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 transition">Button 3</button>
      </ButtonGroup>

      {/* Column Direction */}
      <ButtonGroup direction="column" className="mb-4">
        <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition">Button A</button>
        <button className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition">Button B</button>
      </ButtonGroup>
    </div>
  );
};

export default App;

Component

buttonGroup.jsx

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

const ButtonGroup = ({ children, className = '', direction = 'row', spacing = 'space-x-2' }) => {
  const flexDirection = direction === 'column' ? 'flex-col' : 'flex-row';
  const spacingClass = direction === 'column' ? 'space-y-2' : spacing;

  return (
    <div className={`flex ${flexDirection} ${spacingClass} ${className}`}>
      {children}
    </div>
  );
};

export default ButtonGroup;

Preview