Button Design System with React Tailwind CSS

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 with three distinct variants Primary, Secondary, and Outline as well as a disabled state and a loading spinner for better user feedback..

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.

React Tailwind Button Component

Button Component Variants

Primary - The default attention-grabbing color for main actions.
Secondary - A softer, muted color for secondary actions.
Outline - A minimalist style with a transparent background and border.

Features of the Loading Spinner Button

Dynamic Spinner Animation
- Displays a spinning loader icon (Loader2 from Lucide React) when in the loading state.
Disabled State Handling
- Automatically disables the button during loading to prevent duplicate submissions.

Here’s the complete code for the button component with live preview:

Button Variants

Disabled State

Loading State

Custom Styles

API

Prop	Type	Required	Default	Description
children	ReactNode	Yes	—	The content inside the button, such as text or icons.
variant	'primary' \| 'secondary' \| 'outline'	No	'primary'	Defines the button style variant.
loading	boolean	No	false	Displays a loading spinner when set to true.
disabled	boolean	No	false	Disables the button when set to true.
type	'button' \| 'submit' \| 'reset'	No	'button'	Specifies the button type attribute.
onClick	MouseEventHandler<HTMLButtonElement>	No	undefined	Function triggered when the button is clicked.
className	string	No	undefined	Additional Tailwind classes for customization.

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.