Toggle

Toggle is a button that stays pressed to represent an on or off state.

Installation

Nothing to add. This component ships as source in your download, so it is already in your project.

Filesrc/vui/toggle.tsx

Import from@viliha/vui-react/toggle

The exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.

Usage

toggle-demo.tsx

import { Toggle } from "@viliha/vui-react/toggle";
import { FontBoldIcon } from "@radix-ui/react-icons";

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

API Reference

Built on the Radix Toggle primitive.

Prop	Type	Default
variant	"default" \| "outline"	"default"
size	"default" \| "sm" \| "lg"	"default"
pressed	boolean	—
onPressedChange	(pressed: boolean) => void	—

Toggle props

It takes no props of its own. Everything you pass reaches the underlying TogglePrimitive.Root primitive, so every attribute it accepts works here unchanged and nothing is invented on top.