Popover

A small floating surface anchored to its trigger: popover fill, hairline border, 12px radius, the one soft shadow. For a form fragment or a detail that does not need the page dimmed. If the user must answer, use a dialog.

<Popover><PopoverTrigger asChild><Button variant="outline">Open</Button></PopoverTrigger><PopoverContent>…</PopoverContent></Popover>

Form fragment

Enter or the button commits and closes; Escape discards. An empty name is refused in place, not swallowed.

Sides