Toggle

A two-state button that can be toggled on or off.

The Toggle is a button with a pressed state, ideal for toolbar actions like bold or italic.

Preview

Usage

Installation

$ npx shadcn@latest add https://spark-ui-olive.vercel.app/r/toggle.json

Properties

PropTypeDefaultDescription
variant"default" | "outline""default"Visual style of the toggle.
size"sm" | "default" | "lg""default"Size of the toggle.
pressedbooleanControlled pressed state.
onPressedChange(pressed: boolean) => voidCalled when the pressed state changes.
classNamestringAdditional CSS classes.