ポップオーバー
Basic Popover
A click-triggered panel anchored to its button, with Escape and outside-click dismiss.
#popover#click#overlay
6 個のフレームワーク中級
Loading…
A lightweight confirmation with role="alertdialog", focused on the safe action.
<div class="relative inline-block">
<button type="button" aria-haspopup="dialog" aria-expanded="true" aria-controls="pconfirm-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">
Delete file
</button>
<!-- role="alertdialog": it interrupts to ask about a consequence, so it is
labelled by its title AND described by its message. -->
<div id="pconfirm-panel" role="alertdialog" aria-labelledby="pconfirm-title" aria-describedby="pconfirm-msg" 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="pconfirm-title" class="text-sm font-semibold text-gray-900 dark:text-gray-100">Delete this file?</h3>
<p id="pconfirm-msg" class="mt-1.5 text-sm leading-relaxed text-gray-600 dark:text-gray-400">This permanently removes report.pdf. This action cannot be undone.</p>
<div class="mt-4 flex justify-end gap-2">
<!-- Focus lands here on open: the SAFE choice, never the destructive one. -->
<button type="button" class="rounded-md px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400">Cancel</button>
<button type="button" class="rounded-md bg-red-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-red-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-red-400 dark:focus-visible:ring-offset-gray-900">Delete</button>
</div>
</div>
</div>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
label必須 | string | - | 読み込み中に読み上げられるアクセシブルなラベル。 |
title必須 | string | - | カードの見出しテキスト。 |
message必須 | string | - | 通知の本文。 |
confirmLabel | string | 'Confirm' | Confirm label |
onConfirm | () => void | - | 破壊的な操作が確認されたときに一度だけ呼ばれます。 |
This is a `role="alertdialog"`, not a plain dialog: it interrupts to ask about a consequence, so it is labelled by its title AND described by its message. Focus lands on the SAFE choice (Cancel) on open - a destructive default one keystroke from Enter is a trap. Escape cancels and restores focus to the trigger. Recolour the confirm button per intent; the red here signals an irreversible action.