Super button versus composition: discuss trade-offs and scalability

WHAT THIS TESTS: This question probes your systems thinking about component API design and whether you recognize the difference between configuration and composition. Interviewers want to see that you understand combinatorial explosion, can weigh maintainability against consumer convenience, and know how design decisions in Figma translate to code complexity. It also surfaces your opinions on type safety, tree-shaking, and cross-functional collaboration with designers.

A GOOD ANSWER COVERS: First, articulate the super button trap: dozens of boolean and enum props create an exponential state space that is impossible to test exhaustively, hard to type strictly, and brittle when designers add one more variant. Second, explain why composition wins for scale: small single-purpose components combine into predictable patterns, keep bundle sizes lean via tree-shaking, and mirror how modern frameworks expect UI to be built. Third, admit the cost: composition requires more boilerplate, disciplined naming, and governance to prevent every screen from reinventing the wheel. Fourth, mention the handoff: Figma variants have practical limits and map poorly to a single mega-component, whereas composable containers and slots align design files with code. Fifth, propose a pragmatic middle path such as a few curated high-level components for the 80 percent use case built atop low-level primitives.

COMMON WRONG ANSWERS: A red flag is insisting the super button is simpler because consumers only import one thing; this signals shallow experience with long-term maintenance. Another mistake is treating composition as a free lunch and ignoring the need for documentation, lint rules, or design tokens to keep composed UIs consistent. Avoid saying Figma variants should drive code architecture one-to-one; tools have different constraints. Also suspicious is framing this as purely a visual choice rather than an API surface and bundle size decision.

LIKELY FOLLOW-UPS: The interviewer may ask how you enforce consistency when anyone can compose components differently. They might probe whether there is ever a case for a monolithic component, such as a highly constrained button with only two approved variants. Expect questions about performance, specifically whether many small components hurt render budgets compared to one large conditional component. You might also be asked how design tokens and theming interact with each approach.

ONE CONCRETE EXAMPLE: Consider a list item that needs a leading icon, trailing chevron, toggle, or subtitle. In the super component model you end with props like hasIcon, iconPosition, trailingType, and showSubtitle, producing dozens of invalid combinations such as a toggle and chevron together. In the composition model you create a ListItem container with consistent padding and background states, then accept children such as a Leading visual, Title text, and Trailing action. Designers build the same way in Figma using auto-layout and component properties for the container while swapping nested instances for content, which keeps design files and code in sync.

Source: Smashing Magazine