Press once to turn it on and again to turn it off. It works well for toolbar actions, outline chips, or a short label beside an icon.
tsx
import { Toggle } from "@/components/ui/toggle"export function Example() { return ( <Toggle variant="outline" aria-label="Bookmark" className="group" > <BookmarkIcon className="group-data-[state=on]:fill-current" /> Bookmark </Toggle> )}Installation
npx @arctis-sh/@arctis-sh/ui@latest add toggleUsage
import { Toggle } from "@/components/ui/toggle"<Toggle>Toggle</Toggle>Outline
Set variant="outline" for a bordered control. Its surface fills when pressed.
tsx
import { Toggle } from "@/components/ui/toggle"export function Example() { return ( <> <Toggle variant="outline" aria-label="Toggle italic"> <ItalicIcon /> </Toggle> <Toggle variant="outline" aria-label="Toggle bold"> <BoldIcon /> </Toggle> </> )}With text
Pair an icon with text when the action needs a clearer label.
tsx
import { Toggle } from "@/components/ui/toggle"export function Example() { return ( <Toggle aria-label="Toggle italic"> <ItalicIcon /> Italic </Toggle> )}Size
Pick sm, default, or lg with size.
tsx
import { Toggle } from "@/components/ui/toggle"export function Example() { return ( <> <Toggle size="sm" aria-label="Toggle bold"> <BoldIcon /> </Toggle> <Toggle aria-label="Toggle bold"> <BoldIcon /> </Toggle> <Toggle size="lg" aria-label="Toggle bold"> <BoldIcon /> </Toggle> </> )}Disabled
Set disabled when the control should not be changed.
tsx
import { Toggle } from "@/components/ui/toggle"export function Example() { return ( <> <Toggle disabled>Disabled</Toggle> <Toggle variant="outline" disabled> Disabled </Toggle> </> )}API Reference
Toggle
| Prop | Type | Default |
|---|---|---|
| pressed | boolean | — |
| defaultPressed | boolean | false |
| onPressedChange | (pressed: boolean) => void | — |
| variant | "default" | "outline" | "default" |
| size | "default" | "sm" | "lg" | "default" |
| disabled | boolean | false |
| className | string | — |
<Toggle aria-label="Bold">B</Toggle>