---
import { Icon } from "@/components/ui/icon"
import { Toggle } from "@/components/ui/toggle"
---
<Toggle aria-label="Toggle bold">
<Icon name="bold" />
</Toggle>Installation
npx shadcn@latest add @fulldev/toggleUsage
---
import { Toggle } from "@/components/ui/toggle"
---<Toggle>Toggle</Toggle>Examples
---
import { Icon } from "@/components/ui/icon"
import { Toggle } from "@/components/ui/toggle"
---
<Toggle variant="outline" aria-label="Toggle italic">
<Icon name="italic" />
</Toggle>---
import { Icon } from "@/components/ui/icon"
import { Toggle } from "@/components/ui/toggle"
---
<div class="flex items-center gap-2">
<Toggle size="sm" aria-label="Toggle bold">
<Icon name="bold" />
</Toggle>
<Toggle size="default" aria-label="Toggle italic">
<Icon name="italic" />
</Toggle>
<Toggle size="lg" aria-label="Toggle underline">
<Icon name="underline" />
</Toggle>
</div>---
import { Icon } from "@/components/ui/icon"
import { Toggle } from "@/components/ui/toggle"
---
<Toggle disabled aria-label="Toggle underline">
<Icon name="underline" />
</Toggle>API Reference
See the GitHub source code for more information on props. See the data-slot docs for more information on interactivity.