Toggle

オンまたはオフの 2 状態ボタン。

import { BookmarkIcon } from "lucide-react"

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

import { ItalicIcon } from "lucide-react"

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

トグルのサイズを変更するには、size プロップを使用します。

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

export function ToggleSizes() {

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

export function ToggleDisabled() {

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイドを参照してください。

"use client"

import * as React from "react"

Radix Toggle ドキュメントを参照してください。

On This Page

shadcn/uiアプリをVercelにデプロイ

OpenAI、Sonos、Adobeなどに採用されています。

Vercelは、アプリや機能を大規模にデプロイするためのツールとインフラを提供します。