Interactive Hover Button

Installation

pnpm dlx @glinui/cli@latest add interactive-hover-button

Credits. Adapted from Magic UI (MIT, (c) Magic UI). Clip path fill, a single accessible label, focus and press parity, token colors, RTL, sizes, glass and loading states. Attribution details.

Prefer the package? npm install @glinui/ui @glinui/motion @glinui/tokens

Usage

Improvements: one accessible label instead of two, a cheap clip-path fill instead of a 100x scaled dot, focus-visible and active parity with hover, logical RTL offsets with a mirrored arrow, sizes, the shared variant vocabulary (glinr default, glass opt-in), loading, asChild and motion levels.

<div className="flex flex-wrap items-center gap-3">
<InteractiveHoverButton variant="glinr">glinr</InteractiveHoverButton>
<InteractiveHoverButton variant="solid">solid</InteractiveHoverButton>

<div className="flex flex-wrap items-center gap-3">
<InteractiveHoverButton variant="glinr">glinr</InteractiveHoverButton>
<InteractiveHoverButton variant="solid">solid</InteractiveHoverButton>
<InteractiveHoverButton variant="plain">plain</InteractiveHoverButton>
<InteractiveHoverButton variant="soft">soft</InteractiveHoverButton>
<InteractiveHoverButton variant="outline">outline</InteractiveHoverButton>
<InteractiveHoverButton variant="ghost">ghost</InteractiveHoverButton>
<InteractiveHoverButton variant="gradient">gradient</InteractiveHoverButton>
</div>

<InteractiveHoverButton variant="glass">Book a demo</InteractiveHoverButton>

<InteractiveHoverButton variant="glass">Book a demo</InteractiveHoverButton>

<InteractiveHoverButton size="sm">Small</InteractiveHoverButton>
<InteractiveHoverButton size="lg" leadingIcon={<Plus />}>New project</InteractiveHoverButton>
<InteractiveHoverButton loading>Saving</InteractiveHoverButton>

<InteractiveHoverButton size="sm">Small</InteractiveHoverButton>
<InteractiveHoverButton size="lg" leadingIcon={<Plus />}>New project</InteractiveHoverButton>
<InteractiveHoverButton loading>Saving</InteractiveHoverButton>

Accessibility

• Native button (or your element with asChild) with the Button focus ring.
• The hover face is aria-hidden, so the label is read once. The original duplicated it.
• Keyboard focus triggers the same fill as hover, and press fills it on touch.

Reduced Motion

Motion level full slides the label and floods the surface with a clip-path. Subtle keeps the flood and opacity swap but drops the slide. None, or prefers-reduced-motion, switches state instantly. Hover effects only run on fine pointers.

API Reference

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

import { InteractiveHoverButton } from "@glinui/ui"