Why I Built This Button Component (And Why It Has 832 Combinations)
After working across a bunch of different brands and products, I started to notice patterns. One thing I kept doing over and over again, on every single project, was rebuilding the button.
It sounds almost too simple to be a real problem. Buttons are everywhere. They do one job. How complicated can it be? What I noticed is how important consistency is across a site, an ecommerce store, or any digital product, and how easy it is to lose track of it specifically with buttons. All those instances, spread across dozens of screens, slowly drifting apart. Of course I started creating my own component for every new project. And that is where experience starts to kick in. Over time, my initial component grew. I started migrating it into each new project, feeding it, making it better with every iteration.
This component is the result of all of that.
I decided to bring together the four styles I reach for the most into a single component, rich enough for every occasion, fully customisable, and now shared with the Figma community.
832 combinations, one component
That number is not an exaggeration. When you map out every possible configuration, this is what the component covers:
4 button styles (Primary, Outline, Ghost and Link) × 2 sizes (medium and small) × 4 interactive states (Default, Hover, Pressed and Disabled) × 4 corner radius options (sharp, fully rounded, 16/14px and 8/6px) × 4 icon placement options (no icon, leading, trailing and icon-only) × 2 background variants (light and dark) = 832 unique combinations.
Every single one of them consistent, because they all come from the same source.
The real power is in the variables
Having a lot of combinations means nothing if they are painful to manage. What makes this component actually fast to work with are the variables and tokens sitting underneath it. Colors, typography, corner radius values, all of it is driven by tokens. To adapt the entire system to a new brand, you update the values once. Everything else follows.
This is the part I care about most, because it is the part that saves the most time in real project work. When you are deep in a redesign, onboarding a new client, or handing off a system to a developer, the last thing you want to be doing is chasing down inconsistencies across dozens of elements instances. With this setup, you do not have to.
Why buttons specifically
Buttons are the most used interactive element in any digital product and, in my experience, one of the easiest to lose track of. A slightly different shade here, a border-radius that drifted there, a hover state that someone hardcoded three sprints ago. Small inconsistencies that compound into a design system that nobody fully trusts anymore.
I built this component to solve that problem once, properly, in a way that holds up across projects, scales with complexity and adapts to any brand without starting from scratch.
If you have ever redesigned a product and thought "I wish I had a button component that just worked," this one is for you.
You can check it out in the Figma community at the following link.
Designed with 🫶 by @agoscolantuoni