Toggle

按下后保持按下状态的 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/toggle

示例

开启、关闭与图标

toggle-basic.tsx

import { EyeIcon, LockIcon } from "@/components/zero/icons";import { Toggle } from "@/components/zero/toggle";export default function ToggleBasic() {  return (    <div className="flex flex-wrap items-center gap-3">      <Toggle defaultPressed>        <EyeIcon />        Show taken      </Toggle>      <Toggle variant="secondary">        <LockIcon />        Locked only      </Toggle>      <Toggle size="sm" cut="both" aria-label="Lock the board">        <LockIcon />      </Toggle>    </div>  );}

行为

尺寸、切角与按下效果均与 Button 相同。状态通过 aria-pressed 告知辅助技术；仅含图标的 Toggle 需提供 aria-label。

属性

Toggle

属性	类型	默认值	说明
variant	"ghost" \| "secondary"	"ghost"	关闭时的外观。
size	"sm" \| "md" \| "lg"	"md"	与 Button 相同的高度。
cut	"end" \| "start" \| "both" \| "none"	"end"	斜切位置：末端、起始端、两端或不斜切。
pressed / defaultPressed	boolean	false	是否开启，受控或非受控。

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