Shimmer Button
ShimmerButton is a button with an animated shimmer highlight that orbits the button surface using a CSS conic-gradient.
Basic usage
Tailwind v4
vue
<ShimmerButton>Get Started</ShimmerButton>Custom background
Tailwind v4
vue
<ShimmerButton background="#6366f1">Purple</ShimmerButton>
<ShimmerButton background="#0f172a">Dark</ShimmerButton>
<ShimmerButton background="#059669">Green</ShimmerButton>Custom shimmer color
Tailwind v4
vue
<ShimmerButton shimmer-color="rgba(99,102,241,0.6)" background="#1e1e2e">
Magic ✨
</ShimmerButton>Disabled state
Tailwind v4
vue
<ShimmerButton :disabled="true">Disabled</ShimmerButton>Props
| Prop | Type | Default | Description |
|---|---|---|---|
background | string | '#000' | Button background color |
shimmerColor | string | 'rgba(255,255,255,0.4)' | Shimmer highlight color |
shimmerWidth | string | '90deg' | Angular width of the shimmer wedge (CSS angle, e.g. '90deg') |
borderRadius | string | '8px' | Border radius |
shimmerDuration | string | '3s' | CSS animation duration for the shimmer |
disabled | boolean | false | Disable the button |
Emits
| Event | Payload | Description |
|---|---|---|
click | MouseEvent | Emitted on button click (not emitted when disabled) |
Slots
| Slot | Description |
|---|---|
default | Button label content |