Forms & selection@neumorphism-ui/toggle

Toggle

A standalone button with a persistent pressed state. Label icon-only buttons. Selection also uses an inset surface and border, not color alone.

@neumorphism-ui/toggle

Registry JSON

Preview

Installation

npx shadcn@latest add @neumorphism-ui/toggle

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

Import

"use client";

import { Toggle } from "@/components/ui/toggle";

Example

export default function Example() {

  return (<div className="flex flex-wrap gap-3"><Toggle aria-label={"Pin"}><span aria-hidden="true">◆</span>{"Pin"}</Toggle><Toggle defaultPressed>{"Pin"}</Toggle><Toggle disabled>{"Locked"}</Toggle></div>);
}

API Reference

Component	Prop	Type	Default	Description
`Toggle`	`pressed / defaultPressed`	`boolean`	`—`	Set controlled or initial state.
`Toggle`	`size`	`"sm" \| "default" \| "lg"`	`—`	Choose the control size.
`Toggle`	`disabled`	`boolean`	`—`	Disable user interaction.