Github

Toggle

PreviousNext

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 (		<Toggle aria-label="Toggle bookmark">			<BookmarkIcon className="group-aria-pressed/toggle:fill-primary-soft-foreground" />			Bookmark		</Toggle>	);}

Installation

pnpm dlx shadcn@latest add @herocn/toggle

Usage

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

Examples

Ghost

Use variant="ghost" for a ghost style.

import { BoldIcon, ItalicIcon } from "lucide-react";
import { Toggle } from "@/components/ui/toggle";
export function ToggleGhost() {	return (		<div className="flex flex-wrap items-center gap-2">			<Toggle variant="ghost" aria-label="Toggle italic">				<ItalicIcon />				Italic			</Toggle>			<Toggle variant="ghost" aria-label="Toggle bold">				<BoldIcon />				Bold			</Toggle>		</div>	);}

Sizes

Use the size prop to change the size of the toggle. Icon-only sizes are available with "icon-sm", "icon", and "icon-lg".

import { BookmarkIcon } from "lucide-react";
import { Toggle } from "@/components/ui/toggle";
export function ToggleSizes() {	return (		<div className="flex flex-wrap items-center gap-2">			<Toggle size="xs" aria-label="Toggle extra small">				Extra Small			</Toggle>			<Toggle size="sm" aria-label="Toggle small">				Small			</Toggle>			<Toggle size="default" aria-label="Toggle default">				Default			</Toggle>			<Toggle size="lg" aria-label="Toggle large">				Large			</Toggle>			<Toggle size="icon-xs" aria-label="Toggle icon extra small">				<BookmarkIcon />			</Toggle>			<Toggle size="icon-sm" aria-label="Toggle icon small">				<BookmarkIcon />			</Toggle>			<Toggle size="icon" aria-label="Toggle icon">				<BookmarkIcon />			</Toggle>			<Toggle size="icon-lg" aria-label="Toggle icon large">				<BookmarkIcon />			</Toggle>		</div>	);}

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>				Disabled			</Toggle>			<Toggle variant="ghost" aria-label="Toggle ghost disabled" disabled>				Disabled			</Toggle>		</div>	);}

RTL

"use client";
import { BookmarkIcon } from "lucide-react";
import {	type Translations,	useTranslation,} from "@/components/language-selector";import { Toggle } from "@/components/ui/toggle";
const translations: Translations = {	en: {		dir: "ltr",		values: {			label: "Bookmark",		},	},	ar: {		dir: "rtl",		values: {			label: "إشارة مرجعية",		},	},	he: {		dir: "rtl",		values: {			label: "סימנייה",		},	},};
export function ToggleRtl() {	const { dir, language, t } = useTranslation(translations, "ar");
	return (		<div lang={language} dir={dir}>			<Toggle aria-label="Toggle bookmark">				<BookmarkIcon className="group-aria-pressed/toggle:fill-primary-soft-foreground" />				{t.label}			</Toggle>		</div>	);}

API Reference

Toggle

PropTypeDefault