Toggle

A pressable button that alternates between on and off.

Basic

Toggle manages pressed state internally when used uncontrolled via defaultPressed. Use onPressedChange to react to state changes.

Off

'use client';

import { useState } from 'react';
import { Toggle } from '@venator-ui/ui';

export function ToggleExample() {
const [pressed, setPressed] = useState(false);

return (
  <div className="flex items-center gap-3">
    <Toggle pressed={pressed} onPressedChange={setPressed}>
      Bold
    </Toggle>
    <span className="text-sm text-neutral-500">
      {pressed ? 'On' : 'Off'}
    </span>
  </div>
);
}

Sizes

Use the size prop to control padding and font size.

<Toggle size="sm">Small</Toggle>
<Toggle size="md">Medium</Toggle>
<Toggle size="lg">Large</Toggle>

Disabled

Set disabled to prevent interaction and apply muted styles.

<Toggle disabled>Disabled off</Toggle>
<Toggle defaultPressed disabled>Disabled on</Toggle>

Props

Toggle

Prop	Type	Default	Description
`pressed`	`boolean`	—	Controlled pressed state
`defaultPressed`	`boolean`	`false`	Initial pressed state in uncontrolled mode
`onPressedChange`	`(pressed: boolean) => void`	—	Called when pressed state changes
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Controls padding and font size
`disabled`	`boolean`	`false`	Prevents interaction and applies muted styles
`className`	`string`	—	Additional Tailwind classes
`children`	`ReactNode`	—	Label or icon content