Neumorphism UI

Toggle

Use Toggle for a button that keeps a pressed state, such as pinning or enabling a formatting option.

Preview

Pin states

Compare an icon-and-text toggle, an initially pressed toggle, and a disabled control.

Loading preview.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/toggle

Install the shared base once, then add components and their dependencies with the CLI.

Registry JSON

Usage

Give the control a clear label and set defaultPressed or controlled pressed state. Use ToggleGroup when several related pressed controls belong together.

"use client";

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

export default function Example() {
  return <Toggle aria-label="Bold">Bold</Toggle>;
}

API Reference

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

ComponentPropTypeDefaultDescription
Togglepressed / defaultPressedboolean—Set controlled or initial state.
Togglesize"sm" | "default" | "lg"—Choose the control size.
Toggledisabledboolean—Disable user interaction.

Accessibility

  • 01

    Label icon-only buttons. Selection also uses an inset surface and border, not color alone.

  • 02

    Preserve labels and visible focus when customizing render or className.