Create a React Button Component

As a React developer with over eight years of experience, I’ve built countless user interfaces, and one of the most fundamental UI elements is the button. Despite its simplicity, creating a reusable and customizable button component in React can significantly improve your project’s maintainability and scalability.

In this article, I’ll walk you through creating a React button component from scratch. I’ll share practical tips and code examples that I’ve used in real-world projects, especially those tailored for USA-based applications like booking systems, e-commerce, and business dashboards.

Create a Custom Button Component

You might wonder, “Why not just use the default HTML <button> element?” While the native button works well, building a custom React button component offers several advantages:

• Consistency: Ensures uniform styling and behavior across your app.
• Reusability: Avoids repeating code and simplifies updates.
• Customization: Easily add props for different styles, sizes, and actions.
• Accessibility: Implement ARIA attributes and keyboard support consistently.

In my experience working on projects like online appointment schedulers for US healthcare providers, having a reusable button component has saved countless hours and reduced bugs.

Method 1: Basic React Button Component

Let’s start with a simple button component that accepts text and an onClick handler.

import React from 'react';

const Button = ({ text, onClick }) => {
  return (
    <button 
      onClick={onClick} 
      style={{
        padding: '10px 20px',
        backgroundColor: '#007bff', // Bootstrap blue
        color: '#fff',
        border: 'none',
        borderRadius: '4px',
        cursor: 'pointer',
        fontSize: '16px',
      }}
      aria-label={text}
    >
      {text}
    </button>
  );
};

export default Button;

How to Use It

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

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

  return (
    <div>
      <h1>Book Your Appointment</h1>
      <Button text="Schedule Now" onClick={handleClick} />
    </div>
  );
};

export default App;

I executed the above example code and added the screenshot below.

This example uses inline styles for simplicity, but in production, you might want to use CSS modules or styled-components for better scalability.

Method 2: Add Variants and Sizes

In real applications, buttons often come in different styles and sizes. For example, a primary button for main actions and a secondary button for less prominent actions.

Here’s how I extend the button component to support variants and sizes:

import React from 'react';

const VARIANTS = {
  primary: {
    backgroundColor: '#007bff',
    color: '#fff',
  },
  secondary: {
    backgroundColor: '#6c757d',
    color: '#fff',
  },
  danger: {
    backgroundColor: '#dc3545',
    color: '#fff',
  },
};

const SIZES = {
  small: {
    padding: '5px 10px',
    fontSize: '14px',
  },
  medium: {
    padding: '10px 20px',
    fontSize: '16px',
  },
  large: {
    padding: '15px 30px',
    fontSize: '18px',
  },
};

const Button = ({ text, onClick, variant = 'primary', size = 'medium', disabled = false }) => {
  const variantStyle = VARIANTS[variant];
  const sizeStyle = SIZES[size];

  return (
    <button
      onClick={onClick}
      disabled={disabled}
      style={{
        ...variantStyle,
        ...sizeStyle,
        border: 'none',
        borderRadius: '4px',
        cursor: disabled ? 'not-allowed' : 'pointer',
        opacity: disabled ? 0.6 : 1,
      }}
      aria-label={text}
    >
      {text}
    </button>
  );
};

export default Button;

Usage Example

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

const App = () => {
  return (
    <div>
      <h2>Choose Your Plan</h2>
      <Button text="Subscribe" variant="primary" size="large" />
      <Button text="Learn More" variant="secondary" size="medium" />
      <Button text="Cancel" variant="danger" size="small" disabled />
    </div>
  );
};

export default App;

I executed the above example code and added the screenshot below.

This approach gives you flexibility for different UI needs, such as a red “Cancel” button or a bigger “Subscribe” button, which I often use in SaaS dashboards tailored for US clients.

Method 3: Use Styled-Components for Better Styling

For larger projects, inline styles can get messy. I prefer styled-components because it keeps styles scoped and clean.

First, install the package:

npm install styled-components

Then, create a styled button:

import React from 'react';
import styled, { css } from 'styled-components';

const StyledButton = styled.button`
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;

  ${({ variant }) => variant === 'primary' && css`
    background-color: #007bff;
    color: white;
  `}

  ${({ variant }) => variant === 'secondary' && css`
    background-color: #6c757d;
    color: white;
  `}

  ${({ variant }) => variant === 'danger' && css`
    background-color: #dc3545;
    color: white;
  `}

  ${({ size }) => size === 'small' && css`
    padding: 5px 10px;
    font-size: 14px;
  `}

  ${({ size }) => size === 'medium' && css`
    padding: 10px 20px;
    font-size: 16px;
  `}

  ${({ size }) => size === 'large' && css`
    padding: 15px 30px;
    font-size: 18px;
  `}

  ${({ disabled }) => disabled && css`
    cursor: not-allowed;
    opacity: 0.6;
  `}
`;

const Button = ({ text, onClick, variant = 'primary', size = 'medium', disabled = false }) => {
  return (
    <StyledButton
      onClick={onClick}
      variant={variant}
      size={size}
      disabled={disabled}
      aria-label={text}
    >
      {text}
    </StyledButton>
  );
};

export default Button;

Example Usage

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

const App = () => {
  return (
    <div>
      <h1>US Event Registration</h1>
      <Button text="Register Now" variant="primary" size="large" />
      <Button text="More Info" variant="secondary" size="medium" />
    </div>
  );
};

export default App;

I executed the above example code and added the screenshot below.

Styled-components make it easy to maintain and extend styles as your app grows.

Accessibility Considerations

From my experience, accessibility is non-negotiable, especially for US government or healthcare apps.

• Always use aria-label if the button text is not descriptive.
• Ensure buttons are keyboard navigable.
• Use the disabled attribute properly to prevent interaction.
• Maintain sufficient color contrast for readability.

Creating a reusable React button component is a small but impactful step towards building scalable and maintainable applications. Whether you use simple inline styles, variants and sizes, or styled-components, the key is to keep your components flexible and accessible.

I hope this article gave you practical insights and ready-to-use code to implement in your next USA-based React project. Feel free to customize the examples to fit your specific needs, like booking systems, e-commerce platforms, or business dashboards.

If you have any questions or want me to cover more React UI components, just let me know!

Other React tutorials you may like:

• Pass Props to Child Components in React
• Create a React Calendar Component with Events
• Unstyled React Component Libraries
• Build a React PDF Viewer Component

Bijay Kumar

Bijay Kumar is an experienced Python and AI professional who enjoys helping developers learn modern technologies through practical tutorials and examples. His expertise includes Python development, Machine Learning, Artificial Intelligence, automation, and data analysis using libraries like Pandas, NumPy, TensorFlow, Matplotlib, SciPy, and Scikit-Learn. At PythonGuides.com, he shares in-depth guides designed for both beginners and experienced developers. More about us.

enjoysharepoint.com/