Toggle - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/toggle

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

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

<Toggle>Toggle</Toggle>

Examples

Outline

Outline variant.

Sizes

Size variants.

Disabled

Disabled toggle.

API Reference

Prop	Type	Default	Description
`pressed`	`boolean`	—	The controlled pressed state.
`defaultPressed`	`boolean`	—	The default pressed state.
`onPressedChange`	`(pressed: boolean) => void`	—	Event handler for state changes.
`variant`	`"default" \| "outline"`	`"default"`	The visual variant.
`size`	`"default" \| "sm" \| "lg"`	`"default"`	The size of the toggle.