PulsatingButton
pulsating-button脉冲按钮 · 外扩光环(box-shadow) + RSC
用法
基础用法
primary 底色外扩淡出的脉冲光环，适合引导用户注意的关键动作（订阅 / 报名）。
tsx
<PulsatingButton>立即订阅</PulsatingButton>脉冲速度
duration 控制一轮脉冲的时长，越小脉冲越急促。
tsx
<PulsatingButton duration="1s">急促</PulsatingButton>
<PulsatingButton duration="2.5s">平缓</PulsatingButton>自定义光环色
pulseColor 指定脉冲光环颜色，缺省取 primary 的 70%。
tsx
<PulsatingButton pulseColor="var(--color-danger)">直播中</PulsatingButton>何时用
用一圈外扩脉冲光环引导用户注意的 CTA（订阅、提交等）。普通操作用 Button；边缘游走火花用 ShimmerButton；彩虹流光底用 RainbowButton。
导入
ts
import { PulsatingButton } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| pulseColor | string | var(--color-primary) 的 70% | 脉冲光环色 |
| duration | string | 1.5s | 一轮脉冲秒数 |
| ...buttonProps | ComponentPropsWithoutRef<"button"> | — | 透传原生 button 属性 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onClick | (e: MouseEvent<HTMLButtonElement>) => void | 点击回调，经 ComponentPropsWithoutRef<"button"> 透传 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 按钮文案，经原生 button 属性透传 |
禁忌 / 坑
- 自定义往按钮塞图标+文字若图标掉行，是 Tailwind Preflight
svg{display:block}所致，见 [[tailwind-preflight-svg-block-breaks-icon-text-in-nonflex-button]]——确保文案容器是inline-flex。
相关
Button · ShimmerButton · RainbowButton · RippleButton · ButtonGroup · SocialButton
Playground
<PulsatingButton duration="1.5s">立即订阅</PulsatingButton>