Togglestandard
눌렀다 풀었다 하는 두 상태 버튼인 토글(toggle)입니다. shadcn base-nova 의 stock 아이템이며 Base UI `Toggle` 위에 서 있습니다. 즉시 켜고 끄는 설정에는 `switch` 를, 여러 토글을 묶으려면 `toggle-group` 을 씁니다.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/toggleDefault
toggle-example.tsx
import { Example, ExampleWrapper,} from "@/components/example"import { Button } from "@/components/ui/button"import { Toggle } from "@/components/ui/toggle"import { BoldIcon, BookmarkIcon, ItalicIcon, UnderlineIcon } from "lucide-react"
export default function ToggleExample() { return ( <ExampleWrapper> <ToggleBasic /> <ToggleOutline /> <ToggleSizes /> <ToggleWithButtonText /> <ToggleWithButtonIcon /> <ToggleWithButtonIconText /> <ToggleDisabled /> <ToggleWithIcon /> </ExampleWrapper> )}
function ToggleBasic() { return ( <Example title="Basic"> <div className="flex flex-wrap items-center gap-2"> <Toggle aria-label="Toggle bold" defaultPressed> <BoldIcon /> </Toggle> <Toggle aria-label="Toggle italic"> <ItalicIcon /> </Toggle> <Toggle aria-label="Toggle underline"> <UnderlineIcon /> </Toggle> </div> </Example> )}
function ToggleOutline() { return ( <Example title="Outline"> <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> </Example> )}
function ToggleSizes() { return ( <Example title="Sizes"> <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> </Example> )}
function ToggleWithButtonText() { return ( <Example title="With Button Text"> <div className="flex flex-col gap-4"> <div className="flex items-center gap-2"> <Button size="sm" variant="outline"> Button </Button> <Toggle variant="outline" aria-label="Toggle sm" size="sm"> Toggle </Toggle> </div> <div className="flex items-center gap-2"> <Button size="default" variant="outline"> Button </Button> <Toggle variant="outline" aria-label="Toggle default" size="default"> Toggle </Toggle> </div> <div className="flex items-center gap-2"> <Button size="lg" variant="outline"> Button </Button> <Toggle variant="outline" aria-label="Toggle lg" size="lg"> Toggle </Toggle> </div> </div> </Example> )}
function ToggleWithButtonIcon() { return ( <Example title="With Button Icon"> <div className="flex flex-col gap-4"> <div className="flex items-center gap-2"> <Button aria-label="Bold" variant="outline" size="icon-sm"> <BoldIcon /> </Button> <Toggle variant="outline" aria-label="Toggle sm icon" size="sm"> <BoldIcon /> </Toggle> </div> <div className="flex items-center gap-2"> <Button aria-label="Italic" variant="outline" size="icon"> <ItalicIcon /> </Button> <Toggle variant="outline" aria-label="Toggle default icon" size="default" > <ItalicIcon /> </Toggle> </div> <div className="flex items-center gap-2"> <Button aria-label="Underline" variant="outline" size="icon-lg"> <UnderlineIcon /> </Button> <Toggle variant="outline" aria-label="Toggle lg icon" size="lg"> <UnderlineIcon /> </Toggle> </div> </div> </Example> )}
function ToggleWithButtonIconText() { return ( <Example title="With Button Icon + Text"> <div className="flex flex-col gap-4"> <div className="flex items-center gap-2"> <Button size="sm" variant="outline"> <BoldIcon data-icon="inline-start" /> Button </Button> <Toggle variant="outline" aria-label="Toggle sm icon text" size="sm"> <BoldIcon /> Toggle </Toggle> </div> <div className="flex items-center gap-2"> <Button size="default" variant="outline"> <ItalicIcon data-icon="inline-start" /> Button </Button> <Toggle variant="outline" aria-label="Toggle default icon text" size="default" > <ItalicIcon /> Toggle </Toggle> </div> <div className="flex items-center gap-2"> <Button size="lg" variant="outline"> <UnderlineIcon data-icon="inline-start" /> Button </Button> <Toggle variant="outline" aria-label="Toggle lg icon text" size="lg"> <UnderlineIcon /> Toggle </Toggle> </div> </div> </Example> )}
function ToggleDisabled() { return ( <Example title="Disabled"> <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> </Example> )}
function ToggleWithIcon() { return ( <Example title="With Icon"> <div className="flex flex-wrap items-center gap-2"> <Toggle aria-label="Toggle bookmark" defaultPressed> <BookmarkIcon className="group-data-[state=on]/toggle:fill-accent-foreground" /> </Toggle> <Toggle variant="outline" aria-label="Toggle bookmark outline"> <BookmarkIcon className="group-data-[state=on]/toggle:fill-accent-foreground" /> Bookmark </Toggle> </div> </Example> )}