ShimmerButton
Button with animated shimmer border beam.
Installation
dotnet add package Lumeo.Motion
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <ShimmerButton />
Tested
Tier 2 · Behavior
all components → Render Behavior A11y Keyboard Scale E2E
19 tests across 3 files. Auto-generated from the test suite.
When to Use
- Draw attention to a primary call-to-action in hero sections or landing pages.
- Differentiate a key action from surrounding buttons without heavy color changes.
- Supports all the same variants and sizes as the regular
Buttoncomponent.
Pick a variant to see the shimmer applied to each style live.
API Reference
ShimmerButton
| Prop | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | — | The button's label content. |
| Shimmer | bool | true | When true (default), plays a continuous shimmering light sweep across the button. |
| ShimmerColor | string? | — | CSS color used for the shimmer sweep — defaults to a translucent foreground. |
| Variant | Button.ButtonVariant | Button.ButtonVariant.Default | Visual style, matching ButtonVariant. Defaults to Default. |
| Size | Button.ButtonSize | Button.ButtonSize.Default | Button height/padding, matching ButtonSize. Defaults to Default. |
| Disabled | bool | false | Disables interaction and dims the button. |
| PressEffect | Button.ButtonPressEffect | Button.ButtonPressEffect.None | Visual feedback when the button is pressed down. Default is None (no press animation — original behaviour). |
| Class | string? | — | Additional CSS classes merged onto the root button element. |
| AdditionalAttributes | Dictionary<string, object>? | — | Unmatched attributes are splatted onto the root button element. |
Events
| OnClick | EventCallback<Microsoft.AspNetCore.Components.Web.MouseEventArgs> | Invoked when the button is clicked. |