पॉपओवर
Basic Popover
A click-triggered panel anchored to its button, with Escape and outside-click dismiss.
#popover#click#overlay
6 फ्रेमवर्कमध्यम
Loading…
A dialog with a read-only link field, a copy button and stacking destination chips.
<div class="relative inline-block">
<button type="button" aria-haspopup="dialog" aria-expanded="true" aria-controls="pshare-panel" class="rounded-lg border border-gray-300 bg-white px-3.5 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
Share
</button>
<div id="pshare-panel" role="dialog" aria-labelledby="pshare-title" class="absolute left-0 top-[calc(100%+0.5rem)] z-20 w-72 max-w-[calc(100vw-2rem)] rounded-xl border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-700 dark:bg-gray-900">
<h3 id="pshare-title" class="text-sm font-semibold text-gray-900 dark:text-gray-100">Share this page</h3>
<!-- The row stacks under 320px (flex-col) and sits inline from sm up. -->
<div class="mt-3 flex flex-col gap-2 sm:flex-row">
<input type="text" readonly value="https://adysre.app/p/aurora-launch" aria-label="Shareable link" class="w-full min-w-0 rounded-md border border-gray-300 bg-gray-50 px-2.5 py-1.5 text-sm text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-300 dark:focus-visible:ring-blue-400" />
<button type="button" class="shrink-0 rounded-md bg-blue-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">Copy</button>
</div>
<div class="mt-3 flex flex-wrap gap-2">
<button type="button" class="rounded-md border border-gray-200 px-2.5 py-1 text-xs font-medium text-gray-700 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400">Email</button>
<button type="button" class="rounded-md border border-gray-200 px-2.5 py-1 text-xs font-medium text-gray-700 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400">Slack</button>
<button type="button" class="rounded-md border border-gray-200 px-2.5 py-1 text-xs font-medium text-gray-700 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400">Link</button>
</div>
</div>
</div>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
labelआवश्यक | string | - | लोड होते समय पढ़ा जाने वाला एक्सेसिबल लेबल। |
urlआवश्यक | string | - | Url |
destinations | readonly string[] | - | Destinations |
onCopy | () => void | - | On copy |
A `role="dialog"` with a read-only link field and a Copy button that selects the text, writes to the clipboard where available, and flips to a confirmed state. The input/button row is `flex-col` on mobile and `sm:flex-row` from 640px, and the destination chips wrap - so nothing overflows a 320px viewport. The Clipboard call is optional-chained to degrade quietly where the API is blocked.