ShimmerButton
shimmer-buttonAdds a moving shimmer treatment to a call-to-action button.
Usage
Basic usage
Default primary background color, with a circle of high-gloss sparkles on the edge, suitable for the first screen owner CTA.
tsx
<ShimmerButton>Start using Hulian</ShimmerButton>Customized background color
background can be changed to any color (including token), and the spark color defaults to primary-foreground.
tsx
<ShimmerButton background="var(--color-danger)">Delete account</ShimmerButton>Spark Speed
shimmerDuration Controls the duration of a round of spark wandering, the smaller the faster it is.
tsx
<ShimmerButton shimmerDuration="2s">Rapid</ShimmerButton>
<ShimmerButton shimmerDuration="5s">Soothing</ShimmerButton>When to use
Use ShimmerButton for a primary CTA that needs a moving highlight around its edge. Use Button for ordinary actions, RainbowButton for a flowing multicolor background, or PulsatingButton for an expanding halo.
Import
ts
import { ShimmerButton } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| shimmerColor | string | var(--color-primary-foreground) | Shimmer highlight color. |
| shimmerSize | string | 0.05em | Shimmer width. |
| borderRadius | string | var(--radius) | Button border radius. |
| shimmerDuration | string | 3s | Duration of one shimmer cycle. |
| background | string | var(--color-primary) | Button background color. |
| ...buttonProps | ComponentPropsWithoutRef<"button"> | — | Native button attributes passed to the rendered element. |
Events
| Event | Type | Description |
|---|---|---|
| onClick | (e: MouseEvent<HTMLButtonElement>) => void | Native click handler. |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Button content. |
| render | ReactElement | Custom rendered element, such as <a> or Next.js <Link>; button styles and shimmer structure are merged into it. |
Example
tsx
<ShimmerButton>Get started with Hulian</ShimmerButton>
// Change the background color
<ShimmerButton background="var(--color-danger)">Delete</ShimmerButton>Usage guidelines
- Pass theme-token CSS variables such as
var(--color-danger)to color props so they adapt with the theme; avoid hard-coded color values. - Tailwind Preflight applies
svg { display: block }, which can split a custom icon and label. See [[tailwind-preflight-svg-block-breaks-icon-text-in-nonflex-button]] and make the content wrapperinline-flex.
Related
Button · RainbowButton · PulsatingButton · RippleButton · ButtonGroup · SocialButton
Playground
<ShimmerButton shimmerDuration="3s">Get started</ShimmerButton>