Iconiq is an open-source library of motion-powered React components built around the shadcn registry workflow.

How do I install an Iconiq component?

Install components with shadcn using commands like npx shadcn@latest add @iconiq/button, or use a direct registry URL from https://iconiqui.com/r/button.json.

Is Iconiq free to use?

Yes. Iconiq is open source and free to use for personal and commercial projects.

What technologies power Iconiq?

Iconiq components are written in TypeScript and React, with motion powered by Motion and registry delivery built around shadcn/ui conventions.

Toggle

Pressed-state toggle built on Radix with ripple feedback, icon motion, and both text and icon-only control patterns.

Open in

Installation

npx shadcn@latest add @iconiq/toggle

Props

Toggle

8 props

Single pressed-state toggle built on Radix Toggle, with Motion-driven button, icon, and ripple feedback layered over shadcn-style size and variant classes.

childrenReactNode

Required

Visible button content rendered inside the animated inner span. This can be plain text, icons, or both.

variant"default" | "outline"

Defaultdefault

Visual treatment from the internal CVA config. Outline adds the input border and shadow-sm treatment.

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

Defaultdefault

Height and horizontal padding preset applied through the shared toggleVariants helper.

pressedboolean

Controlled pressed state from Radix Toggle.Root. Use this when the parent should own the on/off state.

defaultPressedboolean

Initial pressed state for uncontrolled usage.

onPressedChange(pressed: boolean) => void

Called after the component kicks off its local motion sequence, with the next pressed value from Radix.

disabledboolean

Disables the toggle and prevents the hover, tap, and pressed-state interaction flow.

classNamestring

Merged onto the rendered motion button for local spacing or surface overrides.

Notes

Additional Radix toggle button props such as aria-label, name, value, and type are forwarded through the underlying Toggle.Root surface.

The component renders Radix Root with asChild internally, then supplies its own motion.button as the child node.