npm

Toggle

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

Installation

pnpm add @viliha/vui-ui

Then import from @viliha/vui-ui/toggle.

Usage

toggle-demo.tsx
import { Toggle } from "@viliha/vui-ui/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.

PropTypeDefault
variant"default" | "outline""default"
size"default" | "sm" | "lg""default"
pressedboolean
onPressedChange(pressed: boolean) => void