Toggle
安装
npx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/toggle.jsonyarn dlx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/toggle.jsonpnpx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/toggle.jsonbunx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/toggle.json参考
示例
Default
Outline
With Text
Small
Large
Disabled
import { Bold, Italic, Underline } from "lucide-react"import { Toggle } from "@/registry/ssp/ui/toggle"export default function ToggleDemo() {return ( <div className='flex flex-wrap items-center gap-2'> <Toggle aria-label='Toggle italic'> <Bold className='h-4 w-4' /> </Toggle> <Toggle variant='outline' aria-label='Toggle italic'> <Italic /> </Toggle> <Toggle aria-label='Toggle italic'> <Italic /> Italic </Toggle> <Toggle size='sm' aria-label='Toggle italic'> <Italic /> </Toggle> <Toggle size='lg' aria-label='Toggle italic'> <Italic /> </Toggle> <Toggle aria-label='Toggle italic' disabled> <Underline className='h-4 w-4' /> </Toggle> </div>)}