saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Toggle

Toggle

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

Loading...

Installation

pnpm dlx shadcn@latest add @saturation/toggle

Usage

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

Examples

Outline

Loading...
Outline variant.

Sizes

Loading...
Size variants.

Disabled

Loading...
Disabled toggle.

API Reference

PropTypeDefaultDescription
pressedboolean—The controlled pressed state.
defaultPressedboolean—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.

On This Page

  • Installation
  • Usage
  • Examples
  • Outline
  • Sizes
  • Disabled
  • API Reference