Signature / Molecule

Pulsating Button

Button with a pulsing glow ring animation for attention-grabbing CTAs.

Edit on GitHub

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

Friday product demo

Offline

Camera and microphone are ready. 128 people are waiting in the lobby.

Installation$

Install from

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

Prefer the package?

Usage$

Crisp glinr surface with an expanding ring around it. The ring uses the accent token by default, visible on light and dark scopes. Override with pulseColor and pulseDuration.

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 { PulsatingButton } from "@glinui/ui"


export function PulsatingButtonVariantsDemo() {
return (
  <div className="flex flex-wrap items-center gap-3">
    <PulsatingButton variant="glinr">glinr</PulsatingButton>
    <PulsatingButton variant="solid">solid</PulsatingButton>
    <PulsatingButton variant="plain">plain</PulsatingButton>
    <PulsatingButton variant="soft">soft</PulsatingButton>
    <PulsatingButton variant="outline">outline</PulsatingButton>
    <PulsatingButton variant="ghost">ghost</PulsatingButton>
    <PulsatingButton variant="gradient">gradient</PulsatingButton>
  </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 { PulsatingButton } from "@glinui/ui"


export function PulsatingButtonGlassDemo() {
return (
  <PulsatingButton variant="glass">Glass</PulsatingButton>
)
}

Custom pulse$

import { PulsatingButton } from "@glinui/ui"


export function PulsatingButtonColorDemo() {
return (
  <PulsatingButton pulseColor="var(--tone-success)" pulseDuration={1.5}>
    Custom pulse
  </PulsatingButton>
)
}

import { PulsatingButton } from "@glinui/ui"


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

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 ring renders only at motion level full. It is removed under prefers-reduced-motion and data-glin-motion="none".

API Reference$

Prop	Type	Required	Default	Description
`pulseColor`	`string`	No	`-`	Ring colour. Defaults to the accent token, visible on light and dark scopes.
`pulseDuration`	`number`	No	`2`	Seconds per pulse.
`variant`	`ButtonVariant \| "accent"`	No	`-`	Vocabulary or legacy variant. `accent` is kept as an alias of `primary`. Omit for the ambient default.

Source$

import { PulsatingButton } from "@glinui/ui"

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

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/pulsating-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

PulsatingButtonProps