For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
0
Sponsor

Toggle

PreviousNext

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

import { BoldIcon } from "lucide-react";

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

export function ToggleDemo() {
  return (

Installation

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

Usage

import { Toggle } from "@/components/ui/toggle/toggle";
<Toggle aria-label="Toggle bold">
  <BoldIcon />
</Toggle>

Examples

Outline

Use the outline variant for a bordered toggle.

import { ItalicIcon } from "lucide-react";

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

export function ToggleOutline() {
  return (

With Text

import { ItalicIcon } from "lucide-react";

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

export function ToggleWithText() {
  return (

Disabled

import { UnderlineIcon } from "lucide-react";

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

export function ToggleDisabled() {
  return (

RTL

To enable right-to-left support, see the RTL guide.

"use client";

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

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

API Reference

See the Base UI documentation for the full API.