Like Button

点赞按钮：心形弹跳、粒子迸发和计数联动，带 aria-pressed。

#button #like #heart #social

在沙盒中编辑

复制一段给 AI 编程工具的提示词，包含源码、依赖和用法

属性

LikeButtonProps

同时支持以下类型的全部属性： Omit<React.ComponentProps<"button">, "onChange" | "defaultValue">

属性	类型	默认值	说明
count	`number`	`128`	—
defaultLiked	`boolean`	`false`	—
onLikedChange	`(liked: boolean) => void`	—	—

安装

$ npx shadcn@latest add https://chromotion.dev/r/like-button.json

同类组件

Star Button

点赞/收藏切换按钮，点击时星星弹簧缩放并迸发粒子，计数同步变化。

Button GitHub

GitHub 风格深色按钮，内联 Octocat 图标，可附带 Star 计数。

Texture Button

深灰底色叠加 SVG feTurbulence 噪点颗粒的质感按钮，颗粒强度可调。