Toggle

Preview

Status: Not pressed

Installation

npx skeci-ui add toggle

Usage

import { Toggle } from '@/components/ui/toggle';
import { Bold } from 'lucide-react';

<Toggle aria-label="Toggle bold">
  <Bold className="h-4 w-4" />
</Toggle>

Variants

SMLGDisabled

Props

Prop	Type	Default	Description
variant	'default' | 'outline'	'default'	The visual style.
size	'default' | 'sm' | 'lg'	'default'	The size of the toggle.
border	'rough' | 'normal'	'rough'	The type of border drawing.
pressed	boolean	—	The controlled pressed state.
defaultPressed	boolean	false	The initial pressed state when uncontrolled.
onPressedChange	(pressed: boolean) => void	—	Callback fired when the state changes.