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 |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | Size step, on the same 32/40/48px scale as Button. |
| 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 |
| render | ReactElement | Custom rendered element, such as <a> or Next.js <Link>; button styles and the pulsing halo are merged into it. |
Example
tsx
<PulsatingButton>Subscribe now</PulsatingButton>
// Slower pulse
<PulsatingButton duration="2.5s">Subscribe now</PulsatingButton>
// When the CTA is a link, render swaps the tag and the halo stays
<PulsatingButton render={<Link href="/signup" />}>Sign up</PulsatingButton>Usage guidelines
- Shares its base with [Button](/components/button). Layout, the three
sizesteps (32/40/48px tall), the focus ring, the disabled treatment, andforwardRefall come from the sameEFFECT_BUTTON_BASE_CLASSandBUTTON_SIZE_CLASS. Colour and corner radius are deliberately not shared, since the background is this component's own effect layer. As a result it lines up with regular Buttons and matches the library-wide focus style; before 0.27.0 each effect button rolled its own markup, lacked all of the above, and sized itself withpx-6 py-3, so a toolbar row came out uneven (#126).
- 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>