To create a reusable button component with styled-components in a React application, follow these steps:

Install styled-components in your project if you haven't already done so:

npm install styled-components

Copy

Import styled-components and React in your button component file:

import React from 'react';
import styled from 'styled-components';

Copy

Define your button component using styled-components, specifying styles for each variant:

const Button = styled.button`
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;

  /* Primary button styles */
  ${(props) =>
    props.primary &&
    `
    background-color: #007bff;
    color: #fff;
  `}

  /* Secondary button styles */
  ${(props) =>
    props.secondary &&
    `
    background-color: #6c757d;
    color: #fff;
  `}

  /* Disabled button styles */
  &:disabled {
    background-color: #ced4da;
    color: #adb5bd;
    cursor: not-allowed;
  }
`;

Copy

Define your Button component, specifying any necessary props (such as primary, secondary, and disabled):

const MyButton = ({ variant, ...props }) => {
  return <Button {...props}>{props.children}</Button>;
};

Copy

Now, you can use the MyButton component throughout your application, passing the appropriate variant prop as needed:

const App = () => {
  return (
    <div>
      <MyButton primary>Primary Button</MyButton>
      <MyButton secondary>Secondary Button</MyButton>
      <MyButton disabled disabled>Disabled Button</MyButton>
    </div>
  );
};

Copy

This setup allows you to create reusable button components with different variants and ensures that each variant has its own distinct styling. The styles are defined using tagged template literals within the styled-components syntax, making it easy to manage and customize the appearance of your buttons.

Edited