Toggle

1
import { BookmarkIcon } from "lucide-solid";
2
import { Toggle } from "~/components/ui/toggle";
3

4
export default function ToggleDemo() {
5
  return (
6
    <Toggle aria-label="Toggle bookmark" size="sm" variant="outline">
7
      <BookmarkIcon class="group-aria-pressed/toggle:fill-foreground" />
8
      Bookmark
9
    </Toggle>
10
  );
11
}

1
import { BoldIcon, ItalicIcon } from "lucide-solid";
2
import { Toggle } from "~/components/ui/toggle";
3

4
export default function ToggleOutline() {
5
  return (
6
    <div class="flex flex-wrap items-center gap-2">
7
      <Toggle variant="outline" aria-label="Toggle italic">
8
        <ItalicIcon />
9
        Italic
10
      </Toggle>
11
      <Toggle variant="outline" aria-label="Toggle bold">
12
        <BoldIcon />
13
        Bold
14
      </Toggle>
15
    </div>
16
  );
17
}

1
import { ItalicIcon } from "lucide-solid";
2
import { Toggle } from "~/components/ui/toggle";
3

4
export default function ToggleText() {
5
  return (
6
    <Toggle aria-label="Toggle italic">
7
      <ItalicIcon />
8
      Italic
9
    </Toggle>
10
  );
11
}

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

3
export default function ToggleSizes() {
4
  return (
5
    <div class="flex flex-wrap items-center gap-2">
6
      <Toggle variant="outline" aria-label="Toggle small" size="sm">
7
        Small
8
      </Toggle>
9
      <Toggle variant="outline" aria-label="Toggle default" size="default">
10
        Default
11
      </Toggle>
12
      <Toggle variant="outline" aria-label="Toggle large" size="lg">
13
        Large
14
      </Toggle>
15
    </div>
16
  );
17
}

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

3
export default function ToggleDisabled() {
4
  return (
5
    <div class="flex flex-wrap items-center gap-2">
6
      <Toggle aria-label="Toggle disabled" disabled>
7
        Disabled
8
      </Toggle>
9
      <Toggle variant="outline" aria-label="Toggle disabled outline" disabled>
10
        Disabled
11
      </Toggle>
12
    </div>
13
  );
14
}