DataInteractive
A wrapper that forwards data-hover, data-active, and data-focus attributes for consistent state styling.
Basic Usage
Style hover/focus/active via the data-attributes Tailwind variants.
<BitBhDataInteractive As="button"
class="inline-flex items-center rounded-lg border border-zinc-200 bg-white px-5 py-2.5 text-sm font-medium cursor-pointer transition-all data-[hover]:bg-sky-50 data-[hover]:border-sky-300 data-[hover]:text-sky-700 data-active:bg-sky-500 data-active:border-sky-500 data-active:text-white data-active:scale-[0.97] data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-600">
Hover, focus, or press me
</BitBhDataInteractive>Link Wrapper
Use As="a" for nav links.
<BitBhDataInteractive As="a" href="#"
class="inline-block rounded-md px-4 py-2 text-sm text-blue-600 no-underline transition-all data-[hover]:bg-blue-50 data-[hover]:text-blue-700 data-active:bg-blue-100 data-active:text-blue-800 data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500">
Dashboard
</BitBhDataInteractive>
<BitBhDataInteractive As="a" href="#"
class="inline-block rounded-md px-4 py-2 text-sm text-blue-600 no-underline transition-all data-[hover]:bg-blue-50 data-[hover]:text-blue-700 data-active:bg-blue-100 data-active:text-blue-800 data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500">
Settings
</BitBhDataInteractive>
<BitBhDataInteractive As="a" href="#"
class="inline-block rounded-md px-4 py-2 text-sm text-blue-600 no-underline transition-all data-[hover]:bg-blue-50 data-[hover]:text-blue-700 data-active:bg-blue-100 data-active:text-blue-800 data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500">
Profile
</BitBhDataInteractive>Render Context
Access state programmatically via Context="state".
<BitBhDataInteractive As="button"
class="inline-flex items-center gap-3 rounded-xl border-2 border-zinc-200 bg-white px-6 py-4 text-base cursor-pointer transition-all data-[hover]:border-violet-400 data-[hover]:bg-violet-50 data-active:border-violet-600 data-active:bg-violet-100 data-active:scale-[0.96] data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-violet-600">
<Template Context="state">
<span class="text-2xl">@(state.Active ? "⚡" : state.Hover ? "👆" : "🖱️")</span>
<span>
@if (state.Active) { <span>Pressing!</span> }
else if (state.Hover) { <span>Hovering…</span> }
else if (state.Focus) { <span>Focused (Tab here)</span> }
else { <span>Interact with me</span> }
</span>
</Template>
</BitBhDataInteractive>Disabled State
When Disabled="true", all interactive states are suppressed.
<BitBhDataInteractive As="button" Disabled="true"
class="inline-flex items-center rounded-lg border border-zinc-200 bg-white px-5 py-2.5 text-sm font-medium data-disabled:opacity-40 data-disabled:cursor-not-allowed data-disabled:pointer-events-none">
I'm disabled
</BitBhDataInteractive>
<BitBhDataInteractive As="button"
class="inline-flex items-center rounded-lg border border-zinc-200 bg-white px-5 py-2.5 text-sm font-medium cursor-pointer data-[hover]:bg-zinc-100">
I'm enabled
</BitBhDataInteractive>Card Grid
Build interactive cards.
Analytics
View your dashboard metrics
Reports
Generate monthly reports
Settings
Configure your workspace
<div class="grid w-full gap-4 grid-cols-[repeat(auto-fit,minmax(180px,1fr))]">
<BitBhDataInteractive As="div" tabindex="0"
class="rounded-xl border border-zinc-200 bg-white p-5 cursor-pointer transition-all data-[hover]:border-violet-400 data-[hover]:shadow-lg data-[hover]:-translate-y-0.5 data-active:border-violet-600 data-active:bg-violet-50 data-active:translate-y-0 data-active:shadow-none data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-violet-600">
<div class="font-semibold mb-1 text-zinc-900">Analytics</div>
<div class="text-xs text-zinc-500">View your dashboard metrics</div>
</BitBhDataInteractive>
<BitBhDataInteractive As="div" tabindex="0"
class="rounded-xl border border-zinc-200 bg-white p-5 cursor-pointer transition-all data-[hover]:border-violet-400 data-[hover]:shadow-lg data-[hover]:-translate-y-0.5 data-active:border-violet-600 data-active:bg-violet-50 data-active:translate-y-0 data-active:shadow-none data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-violet-600">
<div class="font-semibold mb-1 text-zinc-900">Reports</div>
<div class="text-xs text-zinc-500">Generate monthly reports</div>
</BitBhDataInteractive>
<BitBhDataInteractive As="div" tabindex="0"
class="rounded-xl border border-zinc-200 bg-white p-5 cursor-pointer transition-all data-[hover]:border-violet-400 data-[hover]:shadow-lg data-[hover]:-translate-y-0.5 data-active:border-violet-600 data-active:bg-violet-50 data-active:translate-y-0 data-active:shadow-none data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-violet-600">
<div class="font-semibold mb-1 text-zinc-900">Settings</div>
<div class="text-xs text-zinc-500">Configure your workspace</div>
</BitBhDataInteractive>
</div>State Inspector
Live view of the data attributes.
<BitBhDataInteractive As="button"
class="flex flex-col items-center gap-3 rounded-xl border-2 border-zinc-200 bg-zinc-50 px-8 py-6 cursor-pointer transition-all min-w-72 data-[hover]:border-blue-400 data-[hover]:bg-blue-50 data-active:border-blue-600 data-active:bg-blue-100 data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-600">
<Template Context="s">
<span class="font-medium">Interact with this button</span>
<div class="flex flex-wrap gap-2">
<span class="@($"inline-block rounded px-2 py-1 text-xs font-mono border {(s.Hover ? "bg-emerald-100 text-emerald-800 border-emerald-300" : "bg-zinc-100 text-zinc-600 border-zinc-200")}")">data-hover: @(s.Hover ? "✓" : "✗")</span>
<span class="@($"inline-block rounded px-2 py-1 text-xs font-mono border {(s.Focus ? "bg-emerald-100 text-emerald-800 border-emerald-300" : "bg-zinc-100 text-zinc-600 border-zinc-200")}")">data-focus: @(s.Focus ? "✓" : "✗")</span>
<span class="@($"inline-block rounded px-2 py-1 text-xs font-mono border {(s.Active ? "bg-emerald-100 text-emerald-800 border-emerald-300" : "bg-zinc-100 text-zinc-600 border-zinc-200")}")">data-active: @(s.Active ? "✓" : "✗")</span>
</div>
</Template>
</BitBhDataInteractive>