FormsAnimated
Toggle
Two-state buttons that sink in when on and ping on press.
A toggle is a button that stays pressed, like Bold in an editor. Cuelark toggles sink into the surface when on and send the signature ping ring on press.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/toggle.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/toggle.
Builds on: motion
Usage
import { Toggle } from "@/components/ui/toggle";
<Toggle aria-label="Bold"><BoldIcon /></Toggle>Motion
How it moves
Ping ring on press (cuePing); the on state sinks in with an inset shadow.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Toggle
Extends Radix Toggle.Root (pressed, defaultPressed, onPressedChange).
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "ghost" | "outline" | "ghost" | Visual style. |
| size | "sm" | "md" | "lg" | "md" | Height follows --cl-density. |
Accessibility
- Uses aria-pressed.
- Icon-only toggles need an aria-label.
FAQ
Also searched as: react toggle button · shadcn toggle · toggle button component · pressed button state