Shimmer Button

A button with a sheen that sweeps across it, for the one call to action that matters most on the page.

Installation

bash

npx @smicolon/cli add shimmer-button

Run init once per project before adding components. See Installation.

Preview

Custom colours

background takes any CSS colour or gradient, and shimmerColor sets the sheen. CSS variables such as var(--chart-2) follow light and dark mode.

Accessibility

It is a native <button>, so it takes its usual attributes, such as onClick, disabled and type, and shows a focus ring on Tab.
With prefers-reduced-motion set, the sheen is not drawn, and the button looks the same without it.
The sheen sweeps in the reading direction: left to right in English, right to left in Arabic.
The label uses --primary-foreground. With a custom background, check that the label still has enough contrast.

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	The button label.
`shimmerColor`	`string`	`"color-mix(in oklch, var(--primary-foreground) 35%, transparent)"`	Colour of the sheen.
`shimmerDuration`	`string`	`"2s"`	How long one sweep takes.
`shimmerSize`	`string`	`"100%"`	Width of the sheen, as a length or a percentage of the button.
`background`	`string`	`"var(--primary)"`	Background colour or gradient.
`borderRadius`	`string`	`"0.5rem"`	Corner radius.
`...props`	`ButtonHTMLAttributes`	—	Native button attributes, such as `onClick` and `disabled`.
`className`	`string`	—	Extra classes for the component.

Usage

tsx

import { ShimmerButton } from "@/components/ui/shimmer-button"

<ShimmerButton>Shop the collection</ShimmerButton>

<ShimmerButton
  background="linear-gradient(135deg, var(--chart-2), var(--chart-3))"
  shimmerColor="color-mix(in oklch, var(--primary-foreground) 35%, transparent)"
  shimmerSize="40%"
>
  Shop the collection
</ShimmerButton>