Popover with Footer for React

They sit in a div with flex justify-end gap-2. Both are size="sm": Cancel uses variant="outline" and Confirm the default variant. Either one closes the panel.

Cancel and Confirm close the panel. Here the panel is controlled: open and onOpenChange on Popover, and the button's handler sets the state to false. The callback gets the next open state first.

PopoverHeader wraps PopoverTitle reading Title and PopoverDescription reading Content goes here. The button row is the next block in PopoverContent.

The trigger is a Button with variant="outline" and the label Open. Activating it opens the panel. The footer buttons are what set open back to false. Pass the button to render on PopoverTrigger, and use PopoverContent as the panel.

Both use size="sm". The row is justify-end, so they sit at the end of the line with gap-2 between them. Confirm has no extra variant, and Cancel has variant="outline".

Escape closes the panel and returns focus to the trigger. A click outside closes it too. The panel sits beside the button, and the rest of the page stays usable.