Toggle

A toggle button component that can be switched between pressed and unpressed states. Supports multiple variants and sizes.

#Installation

npx @dinachi/cli@latest add toggle

tsx

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

A basic toggle button

Different toggle variants

Prop	Type	Default	Description
variant	'default' \| 'outline'	'default'	The visual style variant of the toggle
size	'default' \| 'sm' \| 'lg'	'default'	The size of the toggle
pressed	boolean	—	The controlled pressed state of the toggle
defaultPressed	boolean	false	The default pressed state when uncontrolled
onPressedChange	(pressed: boolean) => void	—	Callback fired when the pressed state changes
disabled	boolean	false	Whether the toggle is disabled