Basic Button: Build a React Component Library with Tailwind CSS, TypeScript, React, and Next.js

Learn how to create a basic button so you can customize your SaaS app to look and work exactly how you want. Learn how to cover the important states of a button to ensure it's accessible and usable.

⚡️ Demo ⚡️

📰 Newsletter 📰
Signup for my newsletter, "A Bit of SaaS," to keep you informed, inspired, and engaged with the latest trends, tips, and resources in the ever-evolving SaaS industry.

🔖 Chapters 🔖
00:00 - Intro
00:21 - Setup
02:26 - Default State
03:33 - Hover State
04:20 - Focus State
05:34 - Disabled State
06:17 - Outro

📜 Code 📜

👨🏼‍💻 About Me 👨🏼‍💻
I am a principal software engineer and architect who loves building cool cloud software.

[ronaldpaek]

Thank you for this video, this kind of stuff is things I wish people made videos on but never do! That’s a nice button :)

[xtz_]

We need more videos like those keep going 👌🏼

[mister.solovev]

Exactly what I was looking for 🎉 Perfect timing 👍🏻

[adarshdesai]

Amazing series, really needed this.
Would appreciate more commentary during the coding part.

[codernerd]

Sounds like a great idea for a series! 😮 hopefully you will do form elements. Also does using that package still allow the code hinting of the tailwind plugin to work?

[mister.solovev]

What do you think about Class Variance Authority?

[frackinfamous]

Great one brother amazingly helpful for more medium level crowd. That’s so lacking right now.

[AdsonCicilioti]

NIce video! My great question is how reuse components library on a any React Application beyond of Next.js, with the new React 18 features compatibility. You will teach to make a StyleProvider ?

[NotBeHaris]

Hi
You are doing great job by doing those videos.
I have question not related to this specific video but about next auth one. I am using getserversession in layout.js file and pass to navbar so i don't have to show flicker effect of client side authentication. Is it good or i have to useSesssion must.

Thanks a lot again for doing those awesome videos.

[nazarshvets]

Nice video, thanks

Classnames not override each other by order or applying, its order of css in styles

[theresiahansson]

Can you please do more component series like this where you take the component all-the-way to perfection with something like react-aria

[codernerd]

Also would like a loading state/toggle option in case I use it as a submit button 😅

[AbdallahMoubarak]

Hello Ethan, how can we publish this to npm ?

[mister.solovev]

It won’t would be great to see states added. For example, a loading states that transforms text into a spinner. Thank you 🙏🏻