Shimmer Button
Shimmer Button puts a narrow white gradient on top of a solid button and slides it from left to right on a loop. The gradient is a sibling of the label rather than a background image, so the text stays crisp and the sweep is clipped by the button's own rounding.
The loop runs on the compositor through a transform, and it stops entirely when the visitor has asked for reduced motion.
Usage
A highlight sweeps across the face every couple of seconds, so the button reads as alive without moving.
<template>
<div class="flex w-full flex-col items-center gap-4 py-6">
<MShimmerButton>
Ship it
</MShimmerButton>
</div>
</template>
Customize
Customize
Props
| Prop | Type | Default | Description |
|---|---|---|---|
duration | number | 2.4 | Seconds one sweep takes, from fully off the left edge to fully off the right one. |
class | string | '' | CSS classes for the button itself. |
Slots
| Slot | Props | Description |
|---|---|---|
default | - | The button's label. Rendered above the shimmer so the sweep never washes it out. |
UI
This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.shimmerButton in app.config.ts.
| Prop | Type | Default | Description |
|---|---|---|---|
ui | object | - | Per-slot classes merged over the theme defaults. |
| Slot | Props | Description |
|---|---|---|
root | - | group relative inline-flex items-center justify-center overflow-hidden rounded-lg bg-neutral-950 px-6 py-3 text-sm font-medium text-white shadow-lg transition active:scale-[0.98] dark:bg-neutral-900 |
shimmer | - | pointer-events-none absolute inset-y-0 left-0 w-1/2 bg-gradient-to-r from-transparent via-white/35 to-transparent |
label | - | relative z-10 |
Accessibility
The root is a real <button type="button">, so Enter and Space activate it and the browser supplies the focus ring. The shimmer is an empty aria-hidden span, so it never reaches the accessibility tree. With reduced motion the sweep is dropped and the button renders as a plain solid button.