Toggle

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

import { BookmarkIcon } from "lucide-react"

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

Installation


pnpm dlx shadcn@latest add toggle

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

<Toggle>Toggle</Toggle>

Use variant="outline" for an outline style.

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

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

import { ItalicIcon } from "lucide-react"

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

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 DWL Components, see the RTL configuration guide.

"use client"

import * as React from "react"

See the Radix Toggle documentation.

On This Page

Build with DWL Components

Use the copied registry, charts, blocks, and create tools in one place.

Start from the DWL Components create flow and customize from there.