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
- Primary - Attention grabbing color
- Secondary - For secondary action
- 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:
- children: The content or text inside the button.
- variant: Determines the button style; can be primary, secondary, or outline. Defaults to primary.
- disabled: A boolean indicating whether the button is disabled. Defaults to false.
- onClick: A function to handle the button's click event.
Here’s the complete code for the button component:
1import React, { ReactNode, MouseEventHandler } from 'react'
2import classNames from 'classnames'
3
4interface ButtonProps {
5 children: ReactNode
6 variant?: 'primary' | 'secondary' | 'outline'
7 disabled?: boolean
8 onClick?: MouseEventHandler<HTMLButtonElement>
9}
10
11const Button: React.FC<ButtonProps> = ({
12 children,
13 variant = 'primary',
14 disabled = false,
15 onClick,
16}) => {
17 const baseStyles =
18 'w-full max-w-xs rounded py-2 font-medium transition duration-300 ease-in-out'
19
20 const variantStyles = {
21 primary: 'bg-[#00AAFF] text-white hover:bg-sky-600',
22 secondary: 'bg-[#EBEEF7] text-[#191F33] hover:bg-violet-200',
23 outline:
24 'bg-transparent text-[#7D8592] border border-[#D8E0F0] hover:bg-[#D8E0F0]',
25 }
26
27 const disabledStyles = 'bg-[#727f94] text-white cursor-not-allowed'
28
29 return (
30 <button
31 className={classNames(
32 baseStyles,
33 disabled ? disabledStyles : variantStyles[variant!],
34 )}
35 disabled={disabled}
36 onClick={onClick}
37 >
38 {children}
39 </button>
40 )
41}
42
43export default Button
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:
1import Button from './components/Button'
2
3function App() {
4 return (
5 <div className="mx-auto max-w-6xl px-3">
6 <div className="my-10 flex gap-6">
7 <Button>Enroll Course</Button>
8 <Button variant="secondary">Add To Bookmark</Button>
9 <Button variant="outline">Cancel</Button>
10 <Button variant="outline" disabled>
11 Add Todo
12 </Button>
13 </div>
14 </div>
15 )
16}
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.