120k
New

切换

PreviousNext

一种可以处于开启或关闭状态的双状态按钮。

Base UIReact AriaRadix UI
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</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() {

RTL

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

"use client"

import * as React from "react"

API 参考

请参阅 React Aria ToggleButton 文档。