Docs/Toggle

Toggle

A two-state button that can be toggled on/off. Useful for bold, italic, or icon toggles.

Usage

tsx

1import { Toggle } from '@storm-ds/ui'
2
3<Toggle pressed={bold} onPressedChange={setBold}>
4  <BoldIcon />
5</Toggle>

Default

tsx

1const [pressed, setPressed] = useState(false)
2
3<Toggle
4  variant="outline"
5  pressed={pressed}
6  onPressedChange={setPressed}
7>
8  <span className="font-bold">B</span>
9</Toggle>

Variants

tsx

1<Toggle variant="default">Default</Toggle>
2<Toggle variant="outline">Outline</Toggle>

Sizes

tsx

1<Toggle size="sm" pressed>Small</Toggle>
2<Toggle size="md" pressed>Medium</Toggle>
3<Toggle size="lg" pressed>Large</Toggle>

Disabled

tsx

1<Toggle disabled>Disabled</Toggle>

Props

Prop	Type	Default	Description
pressed	boolean	-	Controlled pressed state
onPressedChange	(pressed: boolean) => void	-	Called when pressed changes
variant	'default' \| 'outline'	'default'	Visual style
size	'sm' \| 'md' \| 'lg'	'md'	Toggle size
disabled	boolean	false	Disables the toggle
className	string	-	Custom classes

Use with AI

Create a Next.js component using Storm UI's Toggle. Import: `import { Toggle } from '@storm-ds/ui'`. A two-state button. Use `pressed` + `onPressedChange` for controlled mode. Variants: default, outline. Sizes: sm, md, lg. Uses data-state='on'/'off' for styling. Server component compatible. Example: `<Toggle pressed={isBold} onPressedChange={setIsBold} variant="outline"><BoldIcon /></Toggle>`

Slider

ToggleGroup