Toggle

Two-state button for toolbar actions, filters, and formatting controls.

Installation

npx shadcn@latest add @iconiq/r-toggle

Two-state button with bouncy press feedback and a muted fill that pops in when pressed, layered over Radix UI primitives.

pressedboolean

Controlled pressed state. Pass this when the parent owns whether the toggle is on.

defaultPressedboolean

Default false

Initial pressed state for uncontrolled usage. The component manages future toggles internally.

onPressedChange(pressed: boolean) => void

Called with the next pressed state whenever the toggle is activated or deactivated.

variant"default" | "outline"

Default "default"

Visual treatment. Outline adds a border for toolbar or segmented layouts.

size"default" | "sm" | "lg"

Default "default"

Height, padding, and icon sizing preset for compact toolbars or larger action rows.

disabledboolean

Disables interaction and dims the control while preserving its pressed appearance.

classNamestring

Merged onto the root button for local spacing, width, or color overrides.

Use aria-label or visible text when the toggle contains only an icon.

Additional primitive props such as value, name, and form attributes are forwarded to the root button.

Pressed state drives a horizontal liquid wipe, a one-shot light sheen, and tactile icon motion.

Built on Radix toggle primitives while preserving the same bouncy fill pop, icon snap, and press scale as the Base UI version.

The muted fill wipes in from the left when pressed and retracts to the right on release with a heavy spring.

Each state change sends a diagonal sheen across the surface once. Outline keeps the same outer border in both states.

Icons scale and squash on press with a spring settle.

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: radix-ui, class-variance-authority, motion.

Installs a Radix toggle with the same variant and size API as the Base UI version.

Uses Radix toggle primitives under the same spring background, content lift, and press scale shell.

The generated registry file is /r/r-toggle.json.