Zaidan

Toggle

A two-state button that can be either on or off.

Installation

CLI

npx shadcn@latest add @zaidan/toggle

pnpx shadcn add @zaidan/toggle

yarn dlx shadcn@latest add @zaidan/toggle

bunx shadcn@latest add @zaidan/toggle

Manual

Install the following dependencies:

npm i @kobalte/core

pnpm add @kobalte/core

yarn add @kobalte/core

bun add @kobalte/core

Copy and paste the following code into your project.

1
import type { PolymorphicProps } from "@kobalte/core";
2
import { ToggleButton, type ToggleButtonRootProps } from "@kobalte/core/toggle-button";
3
import { cva, type VariantProps } from "class-variance-authority";
4
import { type ComponentProps, splitProps, type ValidComponent } from "solid-js";
5
import { cn } from "~/lib/utils";
6

7
const toggleVariants = cva(
8
  "group/toggle z-toggle inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
9
  {
10
    variants: {
11
      variant: {
12
        default: "z-toggle-variant-default",
13
        outline: "z-toggle-variant-outline",
14
      },
15
      size: {
16
        default: "z-toggle-size-default",
17
        sm: "z-toggle-size-sm",
18
        lg: "z-toggle-size-lg",
19
      },
20
    },
21
    defaultVariants: {
22
      variant: "default",
23
      size: "default",
24
    },
25
  },
26
);
27

28
type ToggleProps<T extends ValidComponent = "button"> = PolymorphicProps<
29
  T,
30
  ToggleButtonRootProps<T>
31
> &
32
  VariantProps<typeof toggleVariants> &
33
  Pick<ComponentProps<T>, "class">;
34

35
const Toggle = <T extends ValidComponent = "button">(props: ToggleProps<T>) => {
36
  const [local, others] = splitProps(props as ToggleProps, ["variant", "size", "class"]);
37
  return (
38
    <ToggleButton
39
      data-slot="toggle"
40
      class={cn(toggleVariants({ variant: local.variant, size: local.size }), local.class)}
41
      {...others}
42
    />
43
  );
44
};
45

46
export { Toggle, type ToggleProps, toggleVariants };

Examples

Here are the source code of all the examples from the preview page:

Basic

import { Bold, Italic, Underline } from "lucide-solid";
import { Toggle } from "~/components/ui/toggle";

function ToggleBasic() {
  return (
    <Example title="Basic">
      <div class="flex flex-wrap items-center gap-2">
        <Toggle aria-label="Toggle bold" defaultPressed>
          <Bold />
        </Toggle>
        <Toggle aria-label="Toggle italic">
          <Italic />
        </Toggle>
        <Toggle aria-label="Toggle underline">
          <Underline />
        </Toggle>
      </div>
    </Example>
  );
}

Outline

import { Bold, Italic } from "lucide-solid";
import { Toggle } from "~/components/ui/toggle";

function ToggleOutline() {
  return (
    <Example title="Outline">
      <div class="flex flex-wrap items-center gap-2">
        <Toggle variant="outline" aria-label="Toggle italic">
          <Italic />
          Italic
        </Toggle>
        <Toggle variant="outline" aria-label="Toggle bold">
          <Bold />
          Bold
        </Toggle>
      </div>
    </Example>
  );
}

Sizes

import { Toggle } from "~/components/ui/toggle";

function ToggleSizes() {
  return (
    <Example title="Sizes">
      <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>
    </Example>
  );
}

With Button Text

import { Button } from "~/components/ui/button";
import { Toggle } from "~/components/ui/toggle";

function ToggleWithButtonText() {
  return (
    <Example title="With Button Text">
      <div class="flex flex-col gap-4">
        <div class="flex items-center gap-2">
          <Button size="sm" variant="outline">
            Button
          </Button>
          <Toggle variant="outline" aria-label="Toggle sm" size="sm">
            Toggle
          </Toggle>
        </div>
        <div class="flex items-center gap-2">
          <Button size="default" variant="outline">
            Button
          </Button>
          <Toggle variant="outline" aria-label="Toggle default" size="default">
            Toggle
          </Toggle>
        </div>
        <div class="flex items-center gap-2">
          <Button size="lg" variant="outline">
            Button
          </Button>
          <Toggle variant="outline" aria-label="Toggle lg" size="lg">
            Toggle
          </Toggle>
        </div>
      </div>
    </Example>
  );
}

With Button Icon

import { Bold, Italic, Underline } from "lucide-solid";
import { Button } from "~/components/ui/button";
import { Toggle } from "~/components/ui/toggle";

function ToggleWithButtonIcon() {
  return (
    <Example title="With Button Icon">
      <div class="flex flex-col gap-4">
        <div class="flex items-center gap-2">
          <Button variant="outline" size="icon-sm">
            <Bold />
          </Button>
          <Toggle variant="outline" aria-label="Toggle sm icon" size="sm">
            <Bold />
          </Toggle>
        </div>
        <div class="flex items-center gap-2">
          <Button variant="outline" size="icon">
            <Italic />
          </Button>
          <Toggle variant="outline" aria-label="Toggle default icon" size="default">
            <Italic />
          </Toggle>
        </div>
        <div class="flex items-center gap-2">
          <Button variant="outline" size="icon-lg">
            <Underline />
          </Button>
          <Toggle variant="outline" aria-label="Toggle lg icon" size="lg">
            <Underline />
          </Toggle>
        </div>
      </div>
    </Example>
  );
}

With Button Icon + Text

import { Bold, Italic, Underline } from "lucide-solid";
import { Button } from "~/components/ui/button";
import { Toggle } from "~/components/ui/toggle";

function ToggleWithButtonIconText() {
  return (
    <Example title="With Button Icon + Text">
      <div class="flex flex-col gap-4">
        <div class="flex items-center gap-2">
          <Button size="sm" variant="outline">
            <Bold data-icon="inline-start" />
            Button
          </Button>
          <Toggle variant="outline" aria-label="Toggle sm icon text" size="sm">
            <Bold />
            Toggle
          </Toggle>
        </div>
        <div class="flex items-center gap-2">
          <Button size="default" variant="outline">
            <Italic data-icon="inline-start" />
            Button
          </Button>
          <Toggle variant="outline" aria-label="Toggle default icon text" size="default">
            <Italic />
            Toggle
          </Toggle>
        </div>
        <div class="flex items-center gap-2">
          <Button size="lg" variant="outline">
            <Underline data-icon="inline-start" />
            Button
          </Button>
          <Toggle variant="outline" aria-label="Toggle lg icon text" size="lg">
            <Underline />
            Toggle
          </Toggle>
        </div>
      </div>
    </Example>
  );
}

Disabled

import { Toggle } from "~/components/ui/toggle";

function ToggleDisabled() {
  return (
    <Example title="Disabled">
      <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>
    </Example>
  );
}

With Icon

import { Bookmark } from "lucide-solid";
import { Toggle } from "~/components/ui/toggle";

function ToggleWithIcon() {
  return (
    <Example title="With Icon">
      <div class="flex flex-wrap items-center gap-2">
        <Toggle aria-label="Toggle bookmark" defaultPressed>
          <Bookmark class="group-data-[pressed]/toggle:fill-accent-foreground" />
        </Toggle>
        <Toggle variant="outline" aria-label="Toggle bookmark outline">
          <Bookmark class="group-data-[pressed]/toggle:fill-accent-foreground" />
          Bookmark
        </Toggle>
      </div>
    </Example>
  );
}

Preview Docs

Build your own Zaidan

When you're done, click Setup Project to setup your new project.