Squishy Toggle Button

Overview

About the Squishy Toggle Button

A tactile checkbox button with layered highlights, soft depth, and a satisfying pressed state inspired by physical controls. It is delivered as editable TypeScript for React. Tailwind CSS is not required; the component's visual CSS is embedded in its TypeScript source. Its focused API can be adapted to your own content and visual system.

Usage

When to use it

• Playful control panels, creative tools, and media interfaces that benefit from tactile feedback.
• Feature toggles or compact binary actions where a physical-button aesthetic matches the product language.

What’s included

Files in the product ZIP

Usage

Import and render

Copy the packaged source to the documented path, then use the public API shown below.

import { SquishyToggleButton } from "@/components/squishy-toggle-button";

export default function Toggle() {
  return <SquishyToggleButton name="effects" aria-label="Enable effects" />;
}

Props

Component API

Also accepts native checkbox input attributes except className, size, style, and type.

Compatibility

Verified project setup

• ReactLoom's preview is tested with Next.js 16.3.8 App Router, React 19.2.8, TypeScript 5.9.3, and Tailwind CSS 4.3.3. This describes the store environment, not the product's minimum requirements.
• This interactive component includes the "use client" directive and must remain behind a Client Component boundary in the Next.js App Router.
• Tailwind CSS is not required; the component's visual CSS is embedded in its TypeScript source.

Images

No image files are included or required by the packaged component.

Fonts

No font files are included. The component uses system font fallbacks unless your app supplies a matching font.

Installation

Add it to your project

Download the Squishy Toggle Button ZIP, place the source file at src/components/squishy-toggle-button.tsx, and copy the example into your own page or feature folder.

No additional npm runtime packages are required beyond the React host; follow the styling requirements below.