切换按钮 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 { Toggle } from "@/components/ui/toggle"
import { BoldIcon, ItalicIcon } from "lucide-react"

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

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

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

export function ToggleSizes() {

import { Underline } from "lucide-react"

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

请参阅 Radix Toggle 文档。