zeroUI

Toggle

A Button that stays down: a ghost or raised slab while off, filled with the accent while on.

Install

terminal
# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/toggle

Examples

On, off, and an icon

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>  );}

Behaviour

It has Button's sizes and cuts and presses the same way. It reports its state as aria-pressed; give an icon-only toggle an aria-label.

Props

Toggle

PropTypeDefaultDescription
variant"ghost" | "secondary""ghost"Its look while off.
size"sm" | "md" | "lg""md"Button's heights.
cut"end" | "start" | "both" | "none""end"Which edges are cut on the slant.
pressed / defaultPressedbooleanfalseOn, controlled or not.

Also takes every prop of Base UI's Toggle.