As asked
You are adding a Modal component to a shared React design system. How do you design the API so product teams can use it safely without losing flexibility?
Sample answer outline
Start from required behaviour, not props: focus trap, escape handling, backdrop behaviour, labelling, scroll locking, and return focus on close. The API should make the accessible path the default, such as requiring a title or aria label and exposing structured subcomponents for header, body, and footer. Allow controlled and uncontrolled usage where the design system already supports both, but avoid prop combinations that create impossible states. Document examples for destructive confirmation, forms, and simple messages. Candidates often over-focus on visual variants and under-specify lifecycle, accessibility, and composition.
Expect these follow-ups
- How would you prevent nested modals or competing focus traps?
- What props would you refuse to add?
- How do you handle teams that need a custom animation?