How would you create a styled Button accepting a variant prop

WHAT THIS TESTS: The interviewer is checking whether you understand the core mechanism of CSS-in-JS libraries like styled-components or Emotion, which is using tagged template literals with interpolated functions to adapt styles based on props. This pattern is fundamental to building scalable design systems because it co-locates style logic with the component, keeps the public API prop-driven, and avoids the fragility of global class names. At the senior level, they also want to see awareness of TypeScript safety, performance implications, and maintainability.

A GOOD ANSWER COVERS: First, define the component with the library factory such as styled.button. Second, insert a function interpolation inside the template literal that receives the component props and reads the variant value. Third, map that value to concrete CSS rules, either with a plain JavaScript object lookup or a switch statement, returning the correct declarations for properties like background-color, color, and border. Fourth, mention that the component remains a single reusable React element rather than forking into multiple components, and optionally note that adding a default variant improves robustness. If you are using TypeScript, you should define a discriminated union type for the variant prop to catch invalid values at compile time.

COMMON WRONG ANSWERS: A major red flag is creating separate PrimaryButton and SecondaryButton components instead of one prop-driven Button. Another mistake is using standard inline styles via the style attribute, which bypasses the library automatic critical CSS extraction, vendor prefixing, and class-name deduplication. Similarly, manually concatenating className strings or using template literals outside the styled factory defeats the purpose of the library. Over-engineering with heavy runtime logic inside the interpolation can also hurt performance if it executes on every render.

LIKELY FOLLOW-UPS: The interviewer may ask how you would extend this pattern for a polymorphic as prop, how to leverage a ThemeProvider so variants pull values from a global theme object rather than hard-coded hex codes, or how server-side rendering affects style injection order. They might also probe performance by asking whether you know about the transient props API in styled-components to prevent variant from leaking to the DOM, or how to memoize style objects in Emotion.

ONE CONCRETE EXAMPLE: You might define Button as a styled button element and inside its template literal use an interpolated function that checks props.variant. If the variant is primary, the background becomes BF4F74 and the text becomes white; if it is secondary, the background becomes transparent and the text becomes BF4F74. You then render it by passing variant equals primary as a prop. For cleaner maintenance, extract the style mappings into a plain JavaScript object such as variants with keys for primary and secondary, each holding background and color values, and reference that object inside the interpolation function instead of writing inline ternary operators.