Pulse Button

A ring pulses outward to call attention.

Design review: checkout redesign

Maya is walking 38 people through the new payment flow.

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/pulse-button.json

import { PulseButton } from "@/components/ui/pulse-button"

<PulseButton pulse={!seen} onClick={() => setSeen(true)}>Join the call</PulseButton>

Turn pulse off after the user acts. The rings freeze where they are and fade out instead of vanishing.

size="icon" is a round 40px button. A shorter period reads as more urgent.

Up to three rings in flight at once, spread evenly across the period.

Also accepts every native button attribute. The ref points at the button (or the asChild element).

Prop	Type	Default
`pulse`	`boolean` Rings keep pulsing while true. Disabled buttons never pulse.	`true`
`period`	`number` Seconds per pulse.	`2.2`
`rings`	`1 \| 2 \| 3` Rings in flight at once, staggered across the period.	`2`
`variant`	`"solid" \| "outline" \| "soft"` The same faces as Button.	`"solid"`
`size`	`"sm" \| "md" \| "lg" \| "icon"` 32, 40 or 48px tall like Button; icon is a 40px circle.	`"md"`
`color`	`NeonColor` Palette name or hex. Falls back to --neon-accent, then cyan.	inherited
`asChild`	`boolean` Render the child element (a link, say) with the pulse and merge props onto it.	`false`
`disabled`	`boolean` Dims the button, blocks clicks and stops the pulse.	`false`

The pulse is purely visual. If it signals something new (unread messages, a live session), say so in the label or aria-label too.
Pulse sparingly: one per screen, and switch it off once the user has responded.
Under prefers-reduced-motion a single still ring stays around the button instead of the animation.