# ShimmerButton

Source: https://lumeo.nativ.sh/components/shimmer-button

# ShimmerButton

Button with animated shimmer border beam.

## 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 `Button` component.

Preview Code

Default Shimmer

Get Started Learn More

Copy Code

Preview Code

Shimmer Off

No Shimmer With Shimmer

Copy Code

Preview Code

Variants

Default Outline Secondary Ghost

Copy Code

Preview Code

Sizes

Small Default Large

Copy Code

Preview Code

Custom Shimmer Color

Indigo Shimmer Pink Shimmer

Copy Code

## API Reference

### ShimmerButton

Property

Type

Default

Description

Shimmer

bool

true

Enables the shimmer sweep animation.

ShimmerColor

string?

null

CSS color value for the shimmer sweep. Defaults to a translucent foreground.

Variant

Button.ButtonVariant

Default

Visual style: Default, Destructive, Outline, Secondary, Ghost, Link.

Size

Button.ButtonSize

Default

Size: Default, Sm, Lg, Icon.

PressEffect

Button.ButtonPressEffect

None

Visual feedback on press: None, Scale, Brightness, Ripple.

Disabled

bool

false

Disables the button.

OnClick

EventCallback<MouseEventArgs>

—

Click event callback.

Class

string?

null

Additional CSS classes merged onto the button.

## Related Components

-   [Button](/components/button) — The base button component without the shimmer animation.
-   [BorderBeam](/components/border-beam) — Animated gradient border beam for non-button elements.
-   [Sparkles](/components/sparkles) — Decorative sparkle particle animation for text or elements.