切换按钮

一个具有开关两种状态的按钮。

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

安装


pnpm dlx shadcn@latest add toggle

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

<Toggle>切换</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 { Toggle } from "@/components/ui/toggle"

export function ToggleDisabled() {