Toggle

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

Ship therelease notes

Installation

npx shadcn@latest add @iconiq/r-toggle

8 props

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

Defaultfalse

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.

reducedMotionboolean

Forces reduced-motion transitions for the fill, lift, and press scale regardless of system preference.

classNamestring

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

Notes

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.