Glow Button
Pill button with a spring-tracked light inside and mirrored edge glows that crossfade as the pointer changes sides. Vue port of MicroKit UI's Cursor Edge Glow Button.
Default
Move the pointer across the button. The light follows on a spring and the edge on the pointer's side lights up, then both stay where the pointer left.
Usage
Import the parts you need from the component's folder.
import { GlowButton } from "@/components/ui/glow-button";Sizes
sm, default and lg. The glow keeps the same spread at every size.
Colors
colorVariant picks a hand-tuned palette: ember, the original, or cyan. For any other color pass color for the glow and highlight for the inner light, and every other stop is derived from those two.
Theme
The surface adapts to the page. auto follows the nearest dark class, light and dark pin it for a background that never changes.
Secondary
variant="secondary" drops the glow and keeps the height, padding, radius and type, so a second action sits level with the first.
Link
Pass to and it renders a NuxtLink. External URLs open in a new tab.
Spring
frequency sets how fast the light catches the pointer and damping how far it overshoots. Below 1 it bounces, 1 and above it settles.
Playground
Every knob on one panel. The snippet under the preview lists only what differs from the defaults.
API Reference
GlowButton
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "default" | default carries the glow. secondary is a plain translucent pill with the same geometry. |
size | "sm" | "default" | "lg" | "default" | Height 32, 40 or 48px, with padding to match. |
theme | "auto" | "light" | "dark" | "auto" | Surface palette. auto follows the nearest dark class; light and dark pin it. |
colorVariant | "ember" | "cyan" | "ember" | Hand-tuned palette. color and highlight override it. |
color | string | — | Glow color, any CSS color. Overrides colorVariant. |
highlight | string | — | Inner light and rim tint. Derived from color when unset. |
arrow | boolean | true | Trailing arrow after the label. |
frequency | number | 3.4 | Spring frequency in Hz. Higher catches the pointer faster. |
damping | number | 0.78 | Damping ratio. Below 1 overshoots, 1 and above settles without bouncing. |
glowRise | number | 0.5 | Exponent on the edge opacity. Lower values light the edge sooner. |
edgeSaturation | number | 0.55 | Extra saturation on the lit edge at full travel. |
edgeBrightness | number | 0.12 | Extra brightness on the lit edge at full travel. |
hueShift | number | -5 | Hue rotation on both edges, in degrees. |
to | string | — | Renders a NuxtLink. External URLs get target _blank and rel noopener. |
target | string | — | Link target. Overrides the external default. |
as | string | "button" | Element to render when to is empty. |
disabled | boolean | false | Disables the button, or marks the link aria-disabled. |
| Slot | Description |
|---|---|
default | The label. The arrow follows it when arrow is on. |
Accessibility
Keyboard shortcuts and ARIA behavior.
- Renders a native button, or a link when to is set, so Enter and Space behave as usual.
- The edges, the surface and the light are aria-hidden with pointer-events none. Only the label is read and clicked.
- Keyboard focus pulls the light to the centre, and the focus outline sits 8px out so it clears the glow.
- With prefers-reduced-motion: reduce the light stays parked on the right edge and the spring never runs.