Explicit Variants Over Boolean Props
SHOULD: Model mutually-exclusive styles as one enumerated variant prop, not isPrimary/isGhost/isLarge booleans that allow illegal combinations and multiply with every new style. Keep booleans only for orthogonal toggles (disabled, loading, fullWidth). Maps cleanly onto CVA.
Model mutually-exclusive styles as one enumerated variant prop, not a pile of isPrimary/isGhost/isLarge booleans
// good
<Button variant="ghost" size="sm" />
// bad
<Button isGhost isSmall isPrimary />Bad
Good
Why it matters
Three boolean style props already encode eight states, most of them nonsense — `isPrimary` and `isGhost` both true has no meaning, yet the type permits it and some branch has to guess. An enumerated prop, `variant: "primary" | "secondary" | "ghost"`, makes exactly the valid states representable and the illegal ones unspellable, which is the whole point of a type.
It also maps one-to-one onto class-variance-authority, the engine shadcn/ui uses to attach classes per variant, so the API and the styling share one source of truth. Keep booleans for genuinely independent, orthogonal toggles (`disabled`, `loading`, `fullWidth`) — the test is whether two of them being true at once is meaningful. If it is not, they are really one variant wearing several names.