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