React Tailwind CSS Button Components [A Design System]

Buttons are fundamental UI elements in web development, serving as key interaction points for users. Designing a flexible, reusable button component can significantly enhance the consistency and scalability of your React application. In this guide, we’ll walk you through creating a button component using React and Tailwind CSS, complete with three distinct variants—Primary, Secondary, and Outline—as well as a disabled state.

Whether you're building a small project or a large-scale application, having a well-designed button component is crucial. This button design system ensures that your buttons are not only visually appealing but also accessible and easy to maintain.

Button Component UI

Button Component Varaints

1. Primary - Attention grabbing color
2. Secondary - For secondary action
3. Outline - A minimalist style with a transparent background and border.

Tailwind CSS Button Component Code

The button component is built with TypeScript and accepts the following props:

1. children: The content or text inside the button.
2. variant: Determines the button style; can be primary, secondary, or outline. Defaults to primary.
3. disabled: A boolean indicating whether the button is disabled. Defaults to false.
4. onClick: A function to handle the button's click event.

Here’s the complete code for the button component:

import React, { ReactNode, MouseEventHandler } from 'react'
import classNames from 'classnames'

interface ButtonProps {
  children: ReactNode
  variant?: 'primary' | 'secondary' | 'outline'
  disabled?: boolean
  onClick?: MouseEventHandler<HTMLButtonElement>
}

const Button: React.FC<ButtonProps> = ({
  children,
  variant = 'primary',
  disabled = false,
  onClick,
}) => {
  const baseStyles =
    'w-full max-w-xs rounded py-2 font-medium transition duration-300 ease-in-out'

  const variantStyles = {
    primary: 'bg-[#00AAFF] text-white hover:bg-sky-600',
    secondary: 'bg-[#EBEEF7] text-[#191F33] hover:bg-violet-200',
    outline:
      'bg-transparent text-[#7D8592] border border-[#D8E0F0] hover:bg-[#D8E0F0]',
  }

  const disabledStyles = 'bg-[#727f94] text-white cursor-not-allowed'

  return (
    <button
      className={classNames(
        baseStyles,
        disabled ? disabledStyles : variantStyles[variant!],
      )}
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </button>
  )
}

export default Button
Copy

Component Usage Example

To use the button component in your application, simply import it and specify the desired props. Below is an example of how to use the button component with different variants:

import Button from './components/Button'

function App() {
  return (
    <div className="mx-auto max-w-6xl px-3">
      <div className="my-10 flex gap-6">
        <Button>Enroll Course</Button>
        <Button variant="secondary">Add To Bookmark</Button>
        <Button variant="outline">Cancel</Button>
        <Button variant="outline" disabled>
          Add Todo
        </Button>
      </div>
    </div>
  )
}
Copy

This component is a great starting point for building more complex UI systems and can be extended to include additional variants and functionality as needed.