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 |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | Size step, on the same 32/40/48px scale as Button. |
| shimmerColor | string | follows foreground | Shimmer highlight color; defaults to --hulian-shimmer-fg (i.e. foreground). |
| 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. |
| foreground | string | var(--color-primary-foreground) | Text color (#288), paired with background: by default both follow the theme; when you pass a fixed background (a brand gradient that ignores the theme) pair it with a fixed foreground, or dark mode renders near-black text on the gradient. Lands in --hulian-shimmer-fg; the shimmer color reads it by default. |
| ...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)" foreground="var(--color-danger-foreground)">Delete</ShimmerButton>
// Fixed brand gradient (ignores the theme): fix the foreground too, or dark mode turns primary-foreground near-black on the purple gradient
<ShimmerButton background="linear-gradient(135deg,#7c3aed,#4f46e5)" foreground="#fff">Get started</ShimmerButton>Usage guidelines
- Shares its base with [Button](/components/button). Layout, the three
sizesteps (32/40/48px tall), the focus ring, the disabled treatment, andforwardRefall come from the sameEFFECT_BUTTON_BASE_CLASSandBUTTON_SIZE_CLASS. Colour and corner radius are deliberately not shared, since the background is this component's own effect layer. As a result it lines up with regular Buttons and matches the library-wide focus style; before 0.27.0 each effect button rolled its own markup, lacked all of the above, and sized itself withpx-6 py-3, so a toolbar row came out uneven (#126).
- 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>