Icon Button · Animate UI

点击时从按钮顶部边缘爆出粒子的图标按钮。

安装

自有原语直接来自 @animate-ui/react，不依赖 Radix UI、Base UI 或 React Aria；装上包即可使用。

终端

bun add @animate-ui/react motion

用法

直接从 @animate-ui/react 的对应子路径引入，下面就是完整示例；样式由你的类名决定。

icon-button.tsx

import {
  IconButton,
  IconButtonParticles,
} from '@animate-ui/react/primitives/buttons/icon';

export function Star() {
  return (
    <IconButton aria-label="Star">
      <StarIcon />
      <IconButtonParticles className="text-neutral-500" />
    </IconButton>
  );
}

动效

每次点击爆出 6 个粒子，向四周均匀散开 30px，先长大后缩回并淡出，历时 0.8s。
连续点击会叠加多组粒子；减少动效下不播放爆裂。

所有时长都会乘以 AnimateUIProvider 的 tempo，并遵守系统的减少动效设置。

API

动效相关的 transition 与 exitTransition 是 Animate UI 唯一新增的属性；其余 props 见上表。

属性	类型	默认值
hoverScale	`number`	`1`
tapScale	`number`	`0.97`
transition	`Transition`	`{ type: 'spring', stiffness: 550, damping: 30, restSpeed: 10 }`
asChild	`boolean`	`false`
…props	`HTMLMotionProps<'button'>`	`—`
size	`number`	`4`
side	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`
sideOffset	`number`	`0`
align	`'start' \| 'center' \| 'end'`	`'center'`
alignOffset	`number`	`0`
count	`number`	`6`
radius	`number`	`30`
spread	`number`	`360`
duration	`number`	`0.8`
holdDelay	`number`	`0.05`
delay	`number`	`0`
…props	`ParticlesEffectProps`	`—`

未列出的属性与上游 API 完全一致，可在官方文档查阅。

内容对应官方文档 2026-10-18 版本。