---
import BookmarkIcon from "@lucide/astro/icons/bookmark"
import { Toggle } from "@/components/ui/toggle"
---
<Toggle aria-label="Toggle bookmark" size="sm" variant="outline">
<BookmarkIcon class="group-aria-pressed/toggle:fill-foreground" />
Bookmark
</Toggle>Installation
npx shadcn@latest add @fulldev/toggleUsage
import { Toggle } from "@/components/ui/toggle"<Toggle>Toggle</Toggle>Toggle renders a button with aria-pressed. Use defaultPressed for the
initial state. Style the pressed state with aria-pressed: or, on children,
group-aria-pressed/toggle:.
Outline
Use variant="outline" for an outline style.
---
import BoldIcon from "@lucide/astro/icons/bold"
import ItalicIcon from "@lucide/astro/icons/italic"
import { Toggle } from "@/components/ui/toggle"
---
<div class="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>With Text
---
import ItalicIcon from "@lucide/astro/icons/italic"
import { Toggle } from "@/components/ui/toggle"
---
<Toggle aria-label="Toggle italic">
<ItalicIcon />
Italic
</Toggle>Size
Use the size prop to change the size of the toggle.
---
import { Toggle } from "@/components/ui/toggle"
---
<div class="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>Disabled
---
import { Toggle } from "@/components/ui/toggle"
---
<div class="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>RTL
Set dir="rtl" on the toggle or a parent element.
---
import BookmarkIcon from "@lucide/astro/icons/bookmark"
import { Toggle } from "@/components/ui/toggle"
const translations = {
en: {
dir: "ltr",
values: {
label: "Bookmark",
},
},
ar: {
dir: "rtl",
values: {
label: "إشارة مرجعية",
},
},
he: {
dir: "rtl",
values: {
label: "סימנייה",
},
},
} as const
const { dir, values: t } = translations.ar
---
<Toggle aria-label="Toggle bookmark" size="sm" variant="outline" dir={dir}>
<BookmarkIcon class="group-aria-pressed/toggle:fill-foreground" />
{t.label}
</Toggle>API Reference
Source: src/components/ui/toggle
| Prop | Type | Default |
|---|---|---|
variant | "default" | "outline" | "default" |
size | "default" | "sm" | "lg" | "default" |
defaultPressed | boolean | false |
disabled | boolean | false |
toggleVariants gives the same classes to a custom element. See the
data-slot docs
for events such as toggle:change.