Share Popover for React

The copy button writes shareUrl, https://example.com/share, to the clipboard with navigator.clipboard.writeText, then shows a check and the label Copied for two seconds before going back to Copy link. Both icons are aria-hidden, so the aria-label names the button.

The Input has type="url", readOnly, and aria-label="Link", and its value is shareUrl. It sits in a flex gap-2 row with the icon button, which is size="icon-md" variant="outline". The line above the field says Or copy link in text-muted-foreground text-xs.

They are Buttons with variant="outline" and flex-1, in a flex gap-2 row. Each has an svg with aria-hidden="true" and data-icon="inline-start". This demo gives them no handler or link yet.

The trigger is a Button with variant="outline". Share2Icon has aria-hidden="true" and data-icon="inline-start", and the label is Share. PopoverTitle reads Share this page. PopoverContent is w-80 max-w-full. Pass the button to render on PopoverTrigger, and use PopoverContent as the panel.

A Separator sits between the Facebook and Twitter row and the copy block. The copy block is the Or copy link line plus the read-only input. The title Share this page is above both.

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.