Liquid Button · Animate UI

悬停时颜色从底部涨满按钮的液体按钮。

安装

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

终端

bun add @animate-ui/react motion
bunx shadcn@latest add @animate-ui/buttons-liquid

用法

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

liquid-button.tsx

import { LiquidButton } from '@/components/animate-ui/buttons/liquid';

export function Start() {
  return (
    <LiquidButton className="[--liquid-button-background-color:var(--muted)] [--liquid-button-color:var(--primary)] hover:text-primary-foreground">
      Get started
    </LiquidButton>
  );
}

动效

悬停时一条 fillHeight 高度的色带沿底部滑入，再向上涨满按钮，每一步使用 delay 的 CSS 过渡。
离开时填充变量在 0.3s 内退去，文字颜色与液体反向排空；减少动效下直接切换配色。

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

API

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

属性	类型	默认值
delay	`string`	`'0.3s'`
fillHeight	`string`	`'3px'`
hoverScale	`number`	`1`
tapScale	`number`	`0.97`
transition	`Transition`	`{ transform: { type: 'spring', stiffness: 550, damping: 30, restSpeed: 10 }, default: { duration: 0.3, ease: [0.25, 0.1, 0.35, 1] } }`
asChild	`boolean`	`false`
…props	`HTMLMotionProps<'button'>`	`—`
--liquid-button-color	`color`	`—`
--liquid-button-background-color	`color`	`—`

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

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