Toggle

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

import { Toggle } from "@/components/ui/toggle"
import { BookmarkIcon } from "lucide-react"

Installation


pnpm dlx shadcn@latest add toggle

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

<Toggle>Toggle</Toggle>

Use variant="outline" for an outline style.

import { Toggle } from "@/components/ui/toggle"
import { BoldIcon, ItalicIcon } from "lucide-react"

import { Toggle } from "@/components/ui/toggle"
import { ItalicIcon } from "lucide-react"

Use the size prop to change the size of the toggle.

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

export function ToggleSizes() {

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

export function ToggleDisabled() {

To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"

See the Base UI Toggle documentation.

On This Page

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.