切换

可以打开或关闭的双状态按钮。

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

安装

🌐 Installation


pnpm dlx shadcn@latest add toggle

🌐 Usage

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

<Toggle>Toggle</Toggle>

🌐 Examples

🌐 Outline

使用 variant="outline" 来设置大纲样式。

🌐 Use variant="outline" for an outline style.

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

🌐 With Text

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

🌐 Size

使用 size 属性来更改切换开关的大小。

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

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

export function ToggleSizes() {

🌐 Disabled

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

export function ToggleDisabled() {

🌐 RTL

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

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

"use client"

import * as React from "react"

🌐 API Reference

请参阅 Base UI Toggle 文档。

🌐 See the Base UI Toggle documentation.

On This Page