Local-first, open source apps
<script lang="ts">
import BookmarkIcon from "@lucide/svelte/icons/bookmark";
import { Toggle } from "$lib/components/ui/toggle/index.js";
</script>
<Toggle aria-label="Toggle bookmark" size="sm" variant="outline">
<BookmarkIcon class="group-aria-pressed/toggle:fill-foreground" />
Bookmark
</Toggle>pnpm dlx shadcn-svelte@latest add togglenpx shadcn-svelte@latest add togglenpx shadcn-svelte@latest add togglebun x shadcn-svelte@latest add toggleInstall bits-ui:
pnpm i bits-ui -Dnpm i bits-ui -Dyarn install bits-ui -Dbun install bits-ui -DCopy and paste the following code into your project.
import Root from "./toggle.svelte";
export {
toggleVariants,
type ToggleSize,
type ToggleVariant,
type ToggleVariants,
} from "./toggle.svelte";
export {
Root,
//
Root as Toggle,
};
<script lang="ts">
import { Toggle } from "$lib/components/ui/toggle/index.js";
</script><Toggle>Toggle</Toggle>Use variant="outline" for an outline style.
<script lang="ts">
import BoldIcon from "@lucide/svelte/icons/bold";
import ItalicIcon from "@lucide/svelte/icons/italic";
import { Toggle } from "$lib/components/ui/toggle/index.js";
</script>
<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><script lang="ts">
import ItalicIcon from "@lucide/svelte/icons/italic";
import { Toggle } from "$lib/components/ui/toggle/index.js";
</script>
<Toggle aria-label="Toggle italic">
<ItalicIcon />
Italic
</Toggle>Use the size prop to change the size of the toggle.
<script lang="ts">
import { Toggle } from "$lib/components/ui/toggle/index.js";
</script>
<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><script lang="ts">
import { Toggle } from "$lib/components/ui/toggle/index.js";
</script>
<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>