Alert Dialog
A modal that interrupts the user and expects a deliberate response. No overlay-click dismiss.
Basic Alert Dialog
Overlay click does not dismiss. Focus lands on Cancel, Escape closes, focus returns to the trigger.
<BitBhAlertDialog>
<BitBhAlertDialogTrigger class="inline-flex items-center gap-2 rounded-lg border border-red-600 bg-red-600 px-4 py-2 text-sm font-medium text-white cursor-pointer hover:bg-red-700">
Delete account
</BitBhAlertDialogTrigger>
<BitBhAlertDialogOverlay class="bg-black/50" />
<BitBhAlertDialogContent class="w-[calc(100vw-2rem)] max-w-md rounded-xl bg-white p-6 shadow-2xl flex flex-col gap-3">
<BitBhAlertDialogTitle class="text-lg font-semibold text-zinc-900">Are you absolutely sure?</BitBhAlertDialogTitle>
<BitBhAlertDialogDescription class="text-sm text-zinc-500">
This action cannot be undone. This will permanently delete your
account and remove your data from our servers.
</BitBhAlertDialogDescription>
<div class="mt-2 flex justify-end gap-2">
<BitBhAlertDialogCancel class="inline-flex items-center gap-2 rounded-lg border border-zinc-200 bg-white px-4 py-2 text-sm font-medium text-zinc-900 cursor-pointer hover:bg-zinc-100">
Cancel
</BitBhAlertDialogCancel>
<BitBhAlertDialogAction OnClick="HandleDelete"
class="inline-flex items-center gap-2 rounded-lg border border-red-600 bg-red-600 px-4 py-2 text-sm font-medium text-white cursor-pointer hover:bg-red-700">
Yes, delete account
</BitBhAlertDialogAction>
</div>
</BitBhAlertDialogContent>
</BitBhAlertDialog>
@code {
private void HandleDelete() { /* perform the destructive action */ }
}Controlled state
Drive open state with Open + OnOpenChange.
<BitBhButton OnClick="() => isOpen = true"
class="inline-flex items-center gap-2 rounded-lg border border-zinc-200 bg-white px-4 py-2 text-sm font-medium text-zinc-900 cursor-pointer hover:bg-zinc-100">
Discard changes
</BitBhButton>
<BitBhAlertDialog Open="isOpen" OnOpenChange="v => isOpen = v">
<BitBhAlertDialogOverlay class="bg-black/50" />
<BitBhAlertDialogContent class="w-[calc(100vw-2rem)] max-w-md rounded-xl bg-white p-6 shadow-2xl flex flex-col gap-3">
<BitBhAlertDialogTitle class="text-lg font-semibold text-zinc-900">Discard changes?</BitBhAlertDialogTitle>
<BitBhAlertDialogDescription class="text-sm text-zinc-500">
You have unsaved changes. If you leave now, they will be lost.
</BitBhAlertDialogDescription>
<div class="mt-2 flex justify-end gap-2">
<BitBhAlertDialogCancel class="inline-flex items-center gap-2 rounded-lg border border-zinc-200 bg-white px-4 py-2 text-sm font-medium text-zinc-900 cursor-pointer hover:bg-zinc-100">
Keep editing
</BitBhAlertDialogCancel>
<BitBhAlertDialogAction class="inline-flex items-center gap-2 rounded-lg border border-red-600 bg-red-600 px-4 py-2 text-sm font-medium text-white cursor-pointer hover:bg-red-700">
Discard
</BitBhAlertDialogAction>
</div>
</BitBhAlertDialogContent>
</BitBhAlertDialog>
@code {
private bool isOpen;
}