Sample 1
Design System
Overview
Buttons are deceptively simple. This component explores what actually makes a button good — beyond visual styling.
I started by building this component in Vanilla JavaScript to fully understand:
- Native button behavior
- Keyboard interaction
- Focus management
- Disabled and loading states
I then rebuilt it in React, focusing on how component boundaries and props improve reuse and clarity.
Key Decisions
- Used semantic
<button>elements instead of divs - Explicit handling of disabled vs loading states
- Avoided over-abstracting early
What I Learned
- Native HTML gives you a lot for free
- Many “React problems” disappear when semantics are correct
- A simple API is more valuable than flexibility early on
Next Improvements
- Icon support
- Size and variant system
- Keyboard interaction tests