Modals / Dialogs
Built on the shared Dialog component (Base UI primitive) — click "Open" to try the real thing: focus trap, Esc, overlay click, and focus return all work exactly as in production.
Confirmation Dialog
Leave-interview confirmation from InterviewPanel. Uses the "solid" overlay variant (bg-black/50) — kept separate from the info modal's bg-black/40 because it sits over a screen with active audio.
| Prop | Type | Default | Description |
|---|---|---|---|
| overlay | "info" | "solid" | "info" | Backdrop tint + blur. "info" is the default (bg-black/40); "solid" is darker (bg-black/50) for screens with active audio. |
| size | "sm" | "md" | "sm" | Max width of the dialog surface. |
Info Modal
Informational modal from SetupForm. Header with title + close (×), list of label/description items. Toggle below shows how the dialog handles a longer description.
VoiceMock was built by one designer
I'm Sergiy, a product designer. I built this trainer myself — research, design system, code. On LinkedIn I show how products like this come together, and what it changes in a designer's work.
Product Designer · AI Design Engineer · Designer for Startups
See it on LinkedIn