Stop Making Button Variants

You start with a primary button. Simple enough. Then someone needs it in dark mode, so you make primary-dark. Then you need hover states, so now you've got primary-dark-hover. Then focus states. Then the mobile team needs a larger touch target, so primary-dark-hover-large joins the party.

Six months later, you're managing 47 button variants and nobody can remember which one to use where.

Here's the thing - you're solving the problem manually when the system should be solving it automatically. Instead of creating a variant for every possible state, build components that read their environment and adapt. Dark mode? The button checks what theme it's in and adjusts. Hover state? That's built into the component logic, not a separate variant. Mobile? It detects screen size and scales the touch target.

Think about a chameleon. It doesn't carry around 47 different skin colors and manually switch between them. It reads the environment and adapts. Your components should work the same way.

This isn't just about reducing variants, though that's nice. It's about reducing the cognitive load on everyone using your system. Designers stop playing "guess which button variant" and engineers stop implementing the wrong one because they couldn't find the right one in your 12-page component library.
Context-aware beats manually managed. Every single time.