Toggle

The Toggle component provides a customizable button that can be toggled between two states. It supports various styling options through variants and sizes.

Usage

import { Toggle } from '@harnessio/ui/components'

// ...

const [pressed, setPressed] = useState(false)

return <Toggle pressed={pressed} onPressedChange={setPressed}>Dark Mode</Toggle>

API Reference

The Toggle component is a button that can be toggled on and off.

<Toggle
  variant="default"           // [OPTIONAL] visual style variant, can be 'default', 'outline', 'compact'
  size="default"              // [OPTIONAL] size, can 'default', 'sm', 'lg', 'xs', 'icon'
  className="custom"          // [OPTIONAL] additional CSS classes to apply
  defaultPressed              // [OPTIONAL] initial pressed state
  pressed                     // [OPTIONAL] current pressed state
  onPressedChange={onPressed} // [OPTIONAL] event handler called when the pressed state changes
  disabled                    // [OPTIONAL] disable the toggle
>
  Toggle Text
</Toggle>

Prop	Required	Default	Type
variant	false	default	'default' | 'outline' | 'compact'
size	false	default	'default' | 'sm' | 'lg' | 'xs' | 'icon'
className	false		string
children	true		ReactNode
defaultPressed	false	false	boolean
pressed	false		boolean
onPressedChange	false		(pressed: boolean) => void
disabled	false	false	boolean