React Shimmer Effect

RSE

React Shimmer Button Component - Light, Dark & Custom Modes

Enhance your web applications with the dynamic Shimmer Button, available in light and dark modes with customizable sizes.

Shimmer Button Light Mode

<ShimmerButton size="sm" mode="light" />

<ShimmerButton size="md" mode="light" />

<ShimmerButton size="lg" mode="light" />

Shimmer Button Dark Mode

<ShimmerButton size="sm" mode="dark" />

<ShimmerButton size="md" mode="dark" />

<ShimmerButton size="lg" mode="dark" />

Shimmer Button Custom Mode

<ShimmerButton size="sm" mode="custom" from="#7c3aed" via="#8b5cf6" to="#7c3aed" />

<ShimmerButton size="md" mode="custom" from="#7c3aed" via="#8b5cf6" to="#7c3aed" />

<ShimmerButton size="lg" mode="custom" from="#7c3aed" via="#8b5cf6" to="#7c3aed" />

Shimmer Button Loading Mode

<ShimmerButton size="sm" mode="light" rounded={0.4} loading={loading}>
	<button style={{ backgroundColor: "red", height: "30px", width: "80px", borderRadius: "0.4em" }}>click me</button>
</ShimmerButton>

<ShimmerButton size="md" mode="light" rounded={0.4} loading={loading}>
	<button style={{ backgroundColor: "red", height: "40px", width: "100px", borderRadius: "0.4em" }}>click me</button>
</ShimmerButton>

<ShimmerButton size="lg" mode="light" rounded={0.4} loading={loading}>
	<button style={{ backgroundColor: "red", height: "50px", width: "120px", borderRadius: "0.4em" }}>click me</button>
</ShimmerButton>

Properties

Property	Type	Required	Default value	Description
size	"lg" \| "md" \| "sm"	No	md	The size of the button.
height	number	No	40px	The height of the button.
width	number	No	100px	The width of the button.
border	number	No	1px	The border width of the button.
rounded	number	No	0.1em	The border radius of the button.
loading	boolean	No	true	Whether the button is in a loading state.
children	ReactElement	No	-	Element to load after loading false
mode	"light" \| "dark" \| "custom"	Yes	-	The mode of the button (light, dark, or custom).
from, via, to	string	Yes (for mode "custom")	-	The colors used in custom mode.

Take it further

Take full advantage of React Shimmer Effect by experimenting with its extensive features and customization options

React Shimmer Div

Enhance div elements with a shimmering loading animation using this React component.

React Shimmer Title

Apply a stylish shimmer effect to titles while content loads with this React component.

React Shimmer Text

A React component that provides a shimmering effect to text elements during loading.

React Shimmer Section Header

Give section headers a shimmering loading effect with this React component.

React Shimmer Category Items

A React component for adding a shimmer effect to category items while loading.

React Shimmer Content Block

Display shimmering placeholders for content blocks during data loading with this React component.

React Shimmer Table

Use this React component to add a shimmer effect to tables while they load.

React Shimmer Bar Chart

Add a loading shimmer effect to bar charts with this customizable React component.

Getting started

Div