Toggle

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

import { BookmarkIcon } from "lucide-react";

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

export function ToggleDemo() {
  return (

Installation


$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.com/r/toggle.json

Usage

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

<Toggle>Toggle</Toggle>

Outline

Use variant="outline" for an outline style.

import { BoldIcon, ItalicIcon } from "lucide-react";

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

export function ToggleOutline() {
  return (

With Text

import { ItalicIcon } from "lucide-react";

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

export function ToggleText() {
  return (

Size

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

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

export function ToggleSizes() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle variant="outline" aria-label="Toggle small" size="sm">

Disabled

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

export function ToggleDisabled() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle aria-label="Toggle disabled" disabled>

RTL

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

"use client";

import { BookmarkIcon } from "lucide-react";
import * as React from "react";

import { useTranslation } from "@/components/language-selector";