CloseButton
A utility button pre-wired to close the nearest enclosing Dialog, Popover, or Disclosure.
Inside a Dialog
Drop <BitBhCloseButton> anywhere inside a Dialog and it auto-wires the close action.
<BitBhButton OnClick="() => dialogOpen = true"
class="inline-flex items-center gap-2 rounded-lg border border-blue-600 bg-blue-600 px-4 py-2 text-sm font-medium text-white cursor-pointer hover:bg-blue-700">
Open dialog
</BitBhButton>
<BitBhDialog Open="dialogOpen" OnClose="() => dialogOpen = false">
<BitBhDialogBackdrop class="bg-black/50" />
<BitBhDialogPanel class="mx-auto my-16 max-w-md rounded-xl bg-white p-6 shadow-2xl flex flex-col gap-3">
<BitBhDialogTitle class="text-lg font-semibold text-zinc-900">Deactivate account</BitBhDialogTitle>
<BitBhDialogDescription class="text-sm text-zinc-500">
This will permanently deactivate your account. All of your data will be permanently removed.
</BitBhDialogDescription>
<div class="mt-2 flex justify-end gap-2">
<BitBhCloseButton 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</BitBhCloseButton>
<BitBhCloseButton 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">Deactivate</BitBhCloseButton>
</div>
</BitBhDialogPanel>
</BitBhDialog>
@code {
private bool dialogOpen;
}Inside a Popover
Use inside a popover panel to close it on click.
<BitBhPopover class="relative inline-block">
<BitBhPopoverButton class="inline-flex items-center gap-2 rounded-lg border border-zinc-300 bg-white px-3.5 py-2 text-sm cursor-pointer hover:border-zinc-400 data-state-open:border-blue-600">
Solutions ▾
</BitBhPopoverButton>
<BitBhPopoverPanel class="absolute top-[calc(100%+0.5rem)] left-0 z-30 min-w-56 rounded-lg border border-zinc-200 bg-white p-3 shadow-lg flex flex-col gap-1.5">
<h3 class="text-sm font-semibold m-0">Navigation</h3>
<BitBhCloseButton As="a" href="#analytics" class="py-1 text-sm text-blue-600 no-underline hover:underline">Analytics</BitBhCloseButton>
<BitBhCloseButton As="a" href="#engagement" class="py-1 text-sm text-blue-600 no-underline hover:underline">Engagement</BitBhCloseButton>
<BitBhCloseButton As="a" href="#security" class="py-1 text-sm text-blue-600 no-underline hover:underline">Security</BitBhCloseButton>
<hr class="my-1 border-t border-zinc-200" />
<BitBhCloseButton class="block w-full rounded-md p-1.5 text-center text-xs text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900">Dismiss ✕</BitBhCloseButton>
</BitBhPopoverPanel>
</BitBhPopover>Inside a Disclosure
Same pattern in a Disclosure.
Here are some details you can collapse.
<BitBhDisclosure DefaultOpen="true" class="w-full overflow-hidden rounded-lg border border-zinc-200 bg-white">
<BitBhDisclosureButton class="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-5 py-3.5 font-medium hover:bg-zinc-100 data-state-open:bg-zinc-100">
Show details
</BitBhDisclosureButton>
<BitBhDisclosurePanel>
<div class="border-t border-zinc-200 px-5 py-3.5 flex flex-col gap-3 text-sm text-zinc-500">
<p>Here are some details you can collapse.</p>
<BitBhCloseButton class="inline-flex items-center gap-2 rounded-lg border border-zinc-200 bg-white text-xs font-medium text-zinc-900 px-3 py-1.5 cursor-pointer hover:bg-zinc-100 self-start">Hide details</BitBhCloseButton>
</div>
</BitBhDisclosurePanel>
</BitBhDisclosure>Polymorphic rendering (As)
Render as different HTML tags while keeping ARIA + keyboard semantics.
The close actions below render as different elements:
Anchor link
Div with role="button"
<BitBhPopover class="relative inline-block">
<BitBhPopoverButton class="inline-flex items-center gap-2 rounded-lg border border-zinc-300 bg-white px-3.5 py-2 text-sm cursor-pointer hover:border-zinc-400 data-state-open:border-blue-600">
Open panel ▾
</BitBhPopoverButton>
<BitBhPopoverPanel class="absolute top-[calc(100%+0.5rem)] left-0 z-30 min-w-56 rounded-lg border border-zinc-200 bg-white p-3 shadow-lg flex flex-col gap-1.5">
<p class="text-sm text-zinc-500 m-0">The close actions below render as different elements:</p>
<div class="mt-2 flex flex-col gap-2">
<BitBhCloseButton class="inline-flex items-center gap-2 rounded-lg border border-zinc-200 bg-white text-xs font-medium text-zinc-900 px-3 py-1.5 cursor-pointer hover:bg-zinc-100">Button (default)</BitBhCloseButton>
<BitBhCloseButton As="a" href="#" class="py-1 text-sm text-blue-600 no-underline hover:underline">Anchor link</BitBhCloseButton>
<BitBhCloseButton As="div" class="rounded-md bg-zinc-100 px-2.5 py-1.5 text-center text-sm cursor-pointer hover:bg-zinc-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">Div with role="button"</BitBhCloseButton>
</div>
</BitBhPopoverPanel>
</BitBhPopover>Disabled state
data-disabled: dims the button and skips the close action.
The disabled close button below won't close this panel:
<BitBhPopover class="relative inline-block">
<BitBhPopoverButton class="inline-flex items-center gap-2 rounded-lg border border-zinc-300 bg-white px-3.5 py-2 text-sm cursor-pointer hover:border-zinc-400 data-state-open:border-blue-600">
Panel is open ▾
</BitBhPopoverButton>
<BitBhPopoverPanel class="absolute top-[calc(100%+0.5rem)] left-0 z-30 min-w-56 rounded-lg border border-zinc-200 bg-white p-3 shadow-lg flex flex-col gap-1.5">
<p class="text-sm text-zinc-500 m-0">The disabled close button below won't close this panel:</p>
<div class="mt-2 flex flex-col gap-2">
<BitBhCloseButton Disabled="true"
class="inline-flex items-center gap-2 rounded-lg border border-zinc-200 bg-white text-xs font-medium text-zinc-900 px-3 py-1.5 cursor-pointer hover:bg-zinc-100 data-disabled:opacity-50 data-disabled:cursor-not-allowed">
Can't close (disabled)
</BitBhCloseButton>
<BitBhCloseButton class="inline-flex items-center gap-2 rounded-lg border border-blue-600 bg-blue-600 text-xs font-medium text-white px-3 py-1.5 cursor-pointer hover:bg-blue-700">
Close (enabled)
</BitBhCloseButton>
</div>
</BitBhPopoverPanel>
</BitBhPopover>