Signature / Molecule

Shimmer Button

Button with animated shimmer sweep overlay and glass-aware variants.

Edit on GitHub

pnpm dlx @glinui/cli@latest add shimmer-button

Pro

Installation$

Install from

pnpm dlx @glinui/cli@latest add shimmer-button

Prefer the package?

Usage$

Crisp glinr surface with a light sweep layered under the label. The sweep takes the surface text colour at 35 percent, so it is visible on light and dark scopes and on every stage backdrop. Override with shimmerColor and shimmerDuration.

Examples$

Variants$

Every variant of the shared vocabulary works, and the motion effect adapts to the surface colour. Omit variant for the ambient default (glinr).

import { ShimmerButton } from "@glinui/ui"


export function ShimmerButtonVariantsDemo() {
return (
  <div className="flex flex-wrap items-center gap-3">
    <ShimmerButton variant="glinr">glinr</ShimmerButton>
    <ShimmerButton variant="solid">solid</ShimmerButton>
    <ShimmerButton variant="plain">plain</ShimmerButton>
    <ShimmerButton variant="soft">soft</ShimmerButton>
    <ShimmerButton variant="outline">outline</ShimmerButton>
    <ShimmerButton variant="ghost">ghost</ShimmerButton>
    <ShimmerButton variant="gradient">gradient</ShimmerButton>
  </div>
)
}

Glass (opt-in)$

glass is never the default. It needs a colorful or photographic backdrop to read, so place it over imagery or inside a ThemeScope with a backdrop.

import { ShimmerButton } from "@glinui/ui"


export function ShimmerButtonGlassDemo() {
return (
  <ShimmerButton variant="glass">Glass</ShimmerButton>
)
}

import { ShimmerButton } from "@glinui/ui"


export function ShimmerButtonSizesDemo() {
return (
  <div className="flex flex-wrap items-center gap-3">
    <ShimmerButton size="sm">SM</ShimmerButton>
    <ShimmerButton size="md">MD</ShimmerButton>
    <ShimmerButton size="lg">LG</ShimmerButton>
  </div>
)
}

Custom sweep$

import { ShimmerButton } from "@glinui/ui"


export function ShimmerButtonColorDemo() {
return (
  <ShimmerButton shimmerColor="rgb(255 255 255 / 0.5)" shimmerDuration={3} variant="primary">
    Slow accent sweep
  </ShimmerButton>
)
}

Accessibility$

Renders through Button: native <button>, 2px accent focus ring with offset, disabled and aria-busy states.
Accessible name comes from the label. Decorative effect layers are aria-hidden and pointer-events-none.

Reduced Motion$

The sweep renders only at motion level full. It is removed under prefers-reduced-motion and data-glin-motion="none", leaving a normal button.

API Reference$

Prop	Type	Required	Default	Description
`shimmerColor`	`string`	No	`-`	Sweep colour. Defaults to the button's own text colour at 35 percent, so it shows on light and dark surfaces.
`shimmerDuration`	`number`	No	`2`	Seconds per sweep.
`variant`	`ButtonVariant \| "accent"`	No	`-`	Vocabulary or legacy variant. `accent` is kept as an alias of `primary`. Omit for the ambient default.

Source$

import { ShimmerButton } from "@glinui/ui"

packages/ui/src/components/shimmer-button.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/shimmer-button.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

ShimmerButtonProps

`ShimmerButtonProps`

Prop	Type	Required	Default	Description
`shimmerColor`	`string`	No	`-`	Sweep colour. Defaults to the button's own text colour at 35 percent, so it shows on light and dark surfaces.
`shimmerDuration`	`number`	No	`2`	Seconds per sweep.
`variant`	`ButtonVariant \| "accent"`	No	`-`	Vocabulary or legacy variant. `accent` is kept as an alias of `primary`. Omit for the ambient default.