Button

一块带文字的斜切块，边缘斜切，墨黑描边。按下时收缩，松开后回弹，越过原位再落定。

安装

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/button

示例

变体

button-variants.tsx

import { Button } from "@/components/zero/button";export default function ButtonVariants() {  return (    <>      <Button>Accept commission</Button>      <Button variant="secondary">Save for later</Button>      <Button variant="danger">Abandon</Button>      <Button variant="ghost">Skip</Button>    </>  );}

尺寸

button-sizes.tsx

import { Button } from "@/components/zero/button";export default function ButtonSizes() {  return (    <>      <Button size="sm">Small</Button>      <Button size="md">Medium</Button>      <Button size="lg">Large</Button>    </>  );}

切角

button-cuts.tsx

import { Button } from "@/components/zero/button";export default function ButtonCuts() {  return (    <>      <Button cut="end">End</Button>      <Button cut="start">Start</Button>      <Button cut="both">Both</Button>      <Button cut="none">None</Button>    </>  );}

带图标，以及禁用状态

button-icon.tsx

import { Button } from "@/components/zero/button";import { ArrowRightIcon, LockIcon } from "@/components/zero/icons";export default function ButtonIcon() {  return (    <>      <Button variant="secondary">        Next job        <ArrowRightIcon />      </Button>      <Button disabled>        <LockIcon />        Locked      </Button>    </>  );}

行为

按下时，斜切块在 70 ms 内收缩；松开后在 240 ms 内回弹，越过原位再落定。指针悬停时，一道高光沿斜切方向扫过。在触屏设备上，或系统开启「减少动态效果」时，不显示高光，按下也不再收缩。

通过键盘聚焦时，描边换成焦点框：黄色，内侧留一道墨黑间隙，在强调色的填充上同样清晰可辨。

属性

Button

属性	类型	默认值	说明
variant	"primary" \| "secondary" \| "danger" \| "ghost"	"primary"	填充：强调色、炭灰、深色底加危险色描边，或悬停前不填充。
size	"sm" \| "md" \| "lg"	"md"	高 32、40 或 52 px，文字与图标随之缩放。
cut	"end" \| "start" \| "both" \| "none"	"end"	斜切哪一侧。两块在相对的一侧斜切时，可以彼此嵌合。

另可传入 Base UI Button 的全部属性。