Signature / Moleculestable

Pulsating Button

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

@glinui/uiComponent: pulsating-button

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

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

Usage$

Drop-in button with a continuously pulsing ring that draws attention to primary actions.

Basic$

TSX

1import { PulsatingButton } from "@glinui/ui"
2
3export function PulsatingButtonDemo() {
4return <PulsatingButton>Subscribe</PulsatingButton>
5}

Examples$

Variants$

TSX

1import { PulsatingButton } from "@glinui/ui"
2
3export function PulsatingButtonVariantsDemo() {
4return (
5  <div className="flex flex-wrap gap-6">
6    <PulsatingButton variant="default">Default</PulsatingButton>
7    <PulsatingButton variant="accent">Accent</PulsatingButton>
8    <PulsatingButton variant="glass">Glass</PulsatingButton>
9  </div>
10)
11}

Custom Pulse Color$

TSX

1import { PulsatingButton } from "@glinui/ui"
2
3export function PulsatingButtonColorDemo() {
4return <PulsatingButton pulseColor="#6366f1" pulseDuration={1.5}>Custom Pulse</PulsatingButton>
5}

Accessibility$

Native <button> with full keyboard support and focus ring.
Pulse ring is decorative (pointer-events-none).

Reduced Motion$

Pulse animation uses motion-safe:animate-[...] / motion-reduce:hidden. Under prefers-reduced-motion, the pulse ring is hidden.

API Reference$

Prop	Type	Required	Default	Description
`pulseColor`	`string`	No	`-`	Auto-generated from TypeScript source.
`pulseDuration`	`number`	No	`2`	Auto-generated from TypeScript source.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from pulsatingButtonVariants.
`variant`	`"default" \| "accent" \| "glass"`	No	`"default"`	Variant option from pulsatingButtonVariants.

Source$

TSX

1import { 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-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

PulsatingButtonProps

`PulsatingButtonProps`

Prop	Type	Required	Default	Description
`pulseColor`	`string`	No	`-`	-
`pulseDuration`	`number`	No	`2`	-
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from pulsatingButtonVariants.
`variant`	`"default" \| "accent" \| "glass"`	No	`"default"`	Variant option from pulsatingButtonVariants.