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:
-
Public API
-
What inputs/props it exposes (e.g.,
isOpen
,
onClose
,
title
,
actions
,
backdropColor
, etc.).
-
What events/callbacks it emits to the parent.
-
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.
-
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.