切换按钮

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

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>

使用 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"