Hold button

React 按住确认按钮：按住时，一段斜边填充横向推进，用于需要防止误触的操作。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/hold-button

示例

按住分解

Crates scrapped: 0

hold-button-scrap.tsx

import { useState } from "react";import { HoldButton } from "@/components/zero/hold-button";import { Kbd } from "@/components/zero/kbd";export default function HoldButtonScrap() {  const [scrapped, setScrapped] = useState(0);  return (    <div className="grid justify-items-start gap-4">      <div className="flex flex-wrap gap-3">        <HoldButton hotkey="x" onConfirm={() => setScrapped((n) => n + 1)}>          <Kbd>X</Kbd> Hold to scrap        </HoldButton>        <HoldButton variant="danger" duration={2000}>          Abandon the run        </HoldButton>      </div>      <p className="font-medium font-zero-text text-zero-sm text-zero-text-2">        Crates scrapped: <span className="text-zero-text">{scrapped}</span>      </p>    </div>  );}

行为

可以用指针、Enter 或空格键按住，也可以在页面任意位置按住它的 hotkey（在输入框中输入时除外）。中途松开，填充条会退回；按满全程则触发 onConfirm，按钮以强调色闪烁一次。开启「减少动态效果」时，填充条的推进速度不变，因为填充进度本身表示需要按住多久。

它是一个 Button，支持 Button 的全部变体与尺寸，默认为 secondary。读屏软件会提示需要按住。在其中放入 Kbd 即可显示对应按键。

属性

HoldButton

属性	类型	默认值	说明
onConfirm	() => void	—	按满全程后触发一次。
duration	number	1200	需要按住的时长，单位 ms。
hotkey	string	—	在页面任意位置按住即等同于按住此按钮的按键（KeyboardEvent.key）。
variant / size / cut	Button's	"secondary"	同 Button。