PulsatingButton
pulsating-buttonEmphasizes an action with a configurable pulse ring around the button.
Usage
Basic usage
primary The background color expands and fades out to form a pulse halo, suitable for guiding the user's attention to key actions (subscription/registration).
tsx
<PulsatingButton>Subscribe now</PulsatingButton>Pulse speed
duration Controls the duration of one round of pulses. The smaller the pulse, the more rapid it is.
tsx
<PulsatingButton duration="1s">hurried</PulsatingButton>
<PulsatingButton duration="2.5s">Smooth</PulsatingButton>Customized halo color
pulseColor specifies the pulse halo color, which defaults to 70% of primary.
tsx
<PulsatingButton pulseColor="var(--color-danger)">Live broadcast</PulsatingButton>When to use
Use PulsatingButton for a CTA that needs extra emphasis through an expanding halo, such as Subscribe or Submit. Use Button for ordinary actions, ShimmerButton for an animated edge highlight, or RainbowButton for a multicolor flowing background.
Import
ts
import { PulsatingButton } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| pulseColor | string | 70% of var(--color-primary) | Halo color. |
| duration | string | 1.5s | Duration of one pulse cycle. |
| ...buttonProps | ComponentPropsWithoutRef<"button"> | — | Native button props. |
Events
| Event | Type | Description |
|---|---|---|
| onClick | (e: MouseEvent<HTMLButtonElement>) => void | Click callback, transparently transmitted via ComponentPropsWithoutRef<"button"> |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Button copy, transparently transmitted through the native button attribute |
Example
tsx
<PulsatingButton>Subscribe now</PulsatingButton>
// Slower pulse
<PulsatingButton duration="2.5s">Subscribe now</PulsatingButton>Usage guidelines
- Tailwind Preflight applies
svg { display: block }, which can split a custom icon and label. See [[tailwind-preflight-svg-block-breaks-icon-text-in-nonflex-button]] and make the content wrapperinline-flex.
Related
Button · ShimmerButton · RainbowButton · RippleButton · ButtonGroup · SocialButton
Playground
<PulsatingButton duration="1.5s">Subscribe now</PulsatingButton>