Base CTA button

悬浮换位

尾部箭头让位，前方白色块展开的行动按钮。

交互方式

悬停或用键盘聚焦，箭头滑出，前方白块展开。

使用示例

import { BaseCtaButton } from "@/components/ui/base-cta-button"

export function Demo() {
  return <BaseCtaButton onClick={() => console.log("start")}>开始构建</BaseCtaButton>
}

参数

参数	类型 / 默认值	说明
`children`	`ReactNode`"Start building"	按钮文字。
`onClick`	`MouseEventHandler`	原生按钮点击回调。
`disabled`	`boolean`false	禁用按钮。
`className`	`string`	附加样式类。组件同时支持根元素对应的原生属性。

安装内容

Install 会将下面的源码文件写入你的项目。需要的 npm 依赖会一起安装，代码可以直接修改。

clsxtailwind-merge

components/ui/base-cta-button.css
components/ui/base-cta-button.tsx
lib/utils.ts

来源

参考 Base 的 CTA 交互，https://base.org。原收藏基于录屏视觉还原，并非源站源码。