切换按钮 Toggle

一个可以开启或关闭的两态按钮。

import { BookmarkIcon } from "lucide-react"

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

安装


pnpm dlx shadcn@latest add toggle

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

<Toggle>切换</Toggle>

import { BookmarkIcon } from "lucide-react"

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

使用 variant="outline" 来获得描边样式。

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

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

import { ItalicIcon } from "lucide-react"

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

使用 size 属性来改变切换按钮的大小。

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

export function ToggleSizes() {

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

export function ToggleDisabled() {

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

"use client"

import * as React from "react"

请参阅 Radix Toggle 文档。