Shadcn
Toggle 切换按钮
以可按下按钮表达单个开关状态。
Preview
import { BookmarkIcon } from "lucide-react"
import { Toggle } from "@scopify/ui/shadcn/components/toggle"
export function ToggleDemo() {
return (
<Toggle aria-label="Toggle bookmark" size="sm" variant="outline">
<BookmarkIcon className="group-data-[state=on]/toggle:fill-foreground" />
Bookmark
</Toggle>
)
}
Scopify 说明
本页按 shadcn/ui 官方 Radix UI 组件文档的章节与示例完整整理。示例预览使用 Scopify 当前的 @scopify/ui/shadcn 实现；导入路径、主题 Token 和行为差异以本仓库源码为准。
Installation
npx shadcn@latest add toggleUsage
import { Toggle } from "@scopify/ui/shadcn/components/toggle"<Toggle>Toggle</Toggle>Outline
Use variant="outline" for an outline style.
Preview
import { BoldIcon, ItalicIcon } from "lucide-react"
import { Toggle } from "@scopify/ui/shadcn/components/toggle"
export function ToggleOutline() {
return (
<div className="flex flex-wrap items-center gap-2">
<Toggle variant="outline" aria-label="Toggle italic">
<ItalicIcon />
Italic
</Toggle>
<Toggle variant="outline" aria-label="Toggle bold">
<BoldIcon />
Bold
</Toggle>
</div>
)
}
With Text
Preview
import { ItalicIcon } from "lucide-react"
import { Toggle } from "@scopify/ui/shadcn/components/toggle"
export function ToggleText() {
return (
<Toggle aria-label="Toggle italic">
<ItalicIcon />
Italic
</Toggle>
)
}
Size
Use the size prop to change the size of the toggle.
Preview
import { Toggle } from "@scopify/ui/shadcn/components/toggle"
export function ToggleSizes() {
return (
<div className="flex flex-wrap items-center gap-2">
<Toggle variant="outline" aria-label="Toggle small" size="sm">
Small
</Toggle>
<Toggle variant="outline" aria-label="Toggle default" size="default">
Default
</Toggle>
<Toggle variant="outline" aria-label="Toggle large" size="lg">
Large
</Toggle>
</div>
)
}
Disabled
Preview
import { Toggle } from "@scopify/ui/shadcn/components/toggle"
export function ToggleDisabled() {
return (
<div className="flex flex-wrap items-center gap-2">
<Toggle aria-label="Toggle disabled" disabled>
Disabled
</Toggle>
<Toggle variant="outline" aria-label="Toggle disabled outline" disabled>
Disabled
</Toggle>
</div>
)
}
RTL
To enable RTL support in shadcn/ui, see the RTL configuration guide.
Preview
"use client"
import * as React from "react"
import { BookmarkIcon } from "lucide-react"
import {
useTranslation,
type Translations,
} from "@/components/language-selector"
import { Toggle } from "@/styles/radix-nova/ui-rtl/toggle"
const translations: Translations = {
en: {
dir: "ltr",
values: {
label: "Bookmark",
},
},
ar: {
dir: "rtl",
values: {
label: "إشارة مرجعية",
},
},
he: {
dir: "rtl",
values: {
label: "סימנייה",
},
},
}
export function ToggleRtl() {
const { dir, t } = useTranslation(translations, "ar")
return (
<Toggle aria-label="Toggle bookmark" size="sm" variant="outline" dir={dir}>
<BookmarkIcon className="group-aria-pressed/toggle:fill-foreground" />
{t.label}
</Toggle>
)
}
API Reference
See the Radix Toggle documentation.