Toggle

A two-state button that can be either on or off. Built on Base UI's toggle primitive.

Last updated August 7, 2026

CreditsUnchangedPublished

Overview

import { BoldIcon } from "lucide-react"
 
import { Toggle } from "@/components/ui/toggle"
 
export function ToggleDemoExample() {
  return (
    <Toggle aria-label="Toggle bold">
      <BoldIcon />
    </Toggle>
  )
}

Installation

$ npx shadcn@latest add https://ui.persian-labs.ir/r/toggle.json

Usage

import { Toggle } from "@/components/ui/toggle"
 
export function Example() {
  return <Toggle aria-label="Toggle bold">B</Toggle>
}

Outline

import { ItalicIcon } from "lucide-react"
 
import { Toggle } from "@/components/ui/toggle"
 
export function ToggleOutlineExample() {
  return (
    <Toggle variant="outline" aria-label="Toggle italic">
      <ItalicIcon />
    </Toggle>
  )
}

RTL

import { BoldIcon } from "lucide-react"
 
import { Toggle } from "@/components/ui/toggle"
 
export function ToggleRtlExample() {
  return (
    <Toggle aria-label="ضخیم">
      <BoldIcon />
    </Toggle>
  )
}

API Reference

Toggle

Prop	Type	Default	Description
pressed	boolean	undefined	Whether the toggle is pressed. Use when controlled.
defaultPressed	boolean	false	The initial pressed state when uncontrolled.
onPressedChange	(pressed, details) => void	—	Called when the pressed state changes.
variant	"default" \| "outline"	"default"	The visual style of the toggle.
size	"default" \| "sm" \| "lg"	"default"	The size of the toggle.
disabled	boolean	false	Prevents interaction with the toggle.

Edit this page on GitHub

PreviousTextarea NextToggle Group