Design a reusable web dialog component

You are building a UI component library for a web application and are asked to design and implement a reusable dialog (modal) component.

Requirements

The dialog component should:

• Render on top of the page with a semi-transparent background overlay whose color can be configured.
• Display a title/header text.
• Include a close ("X") button in the header to dismiss the dialog.
• Display arbitrary body content provided by the parent (e.g., form fields, text, custom elements).
• Support one or more configurable action buttons (e.g., OK , Cancel , Delete ), where the parent can specify:
  • Button label
  • Visual style (primary/secondary, etc.)
  • Click handler
• Allow the parent component to control whether the dialog is open or closed (i.e., controllable visibility).
• Be reusable across different parts of the app and easy to style/extend.
• Behave well on different screen sizes (desktop and mobile).
• Handle basic accessibility concerns (e.g., keyboard navigation, screen readers).

Task

Describe how you would design this component, including:

1. Public API
   • What inputs/props it exposes (e.g., isOpen , onClose , title , actions , backdropColor , etc.).
   • What events/callbacks it emits to the parent.
2. Internal behavior and state management
   • Which aspects of state are controlled by the parent vs. internal to the dialog (e.g., visibility, focus management).
   • How clicks on the overlay, close button, or action buttons are handled.
3. Implementation outline in a modern front-end stack (e.g., React, Vue, or vanilla JS):
   • How the DOM structure is organized (overlay, dialog container, header, body, footer).
   • How you handle keyboard interaction (e.g., Esc to close, Tab focus trapping).
   • How you handle accessibility (ARIA roles/attributes such as role="dialog" , aria-modal , labeling, initial focus).
   • How you support configurable background overlay color and theming.

You do not need to write full production-ready code, but your answer should be concrete enough that another engineer could implement the component from your design.