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.

Table of Contents

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!