Why I separated `variant` from `intent` in my component API

Every component library starts the same way. You add a Button. It needs a primary style and a danger style, so you reach for a variant prop. Simple enough. Then someone needs a ghost button that also signals danger. You add variant="ghost-danger" . Then outline-success. Then link-warning. Then secondary-danger. Each new combination feels reasonable in isolation. Six months later you have a prop that accepts seventeen strings, half of which your consumers will never discover because nothing in the type system points them there. This is not a tooling problem. It is a modeling problem. The variant prop is doing two unrelated jobs, and conflating them is what causes the explosion. Two orthogonal concerns When you look at what variant is actually encoding in most button APIs, it is carrying two distinct signals: Visual weight : how much attention the component demands. Primary buttons are loud. Ghost buttons are quiet. Outline sits between them. This is a presentation decision. Semantic mea