Toggle

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

Basic

import { HStack, Toggle } from "@vesyl/ui-next";
import { Bold } from "lucide-react";

export default function ToggleBasic() {
  return (
    <HStack justify="center">
      <Toggle aria-label="Toggle bold">
        <Bold />
      </Toggle>
    </HStack>
  );
}

With text

import { HStack, Toggle } from "@vesyl/ui-next";
import { Italic } from "lucide-react";

export default function ToggleWithText() {
  return (
    <HStack justify="center">
      <Toggle aria-label="Toggle italic">
        <Italic />
        Italic
      </Toggle>
    </HStack>
  );
}

Variants

import { HStack, Toggle } from "@vesyl/ui-next";
import { Bold, Italic } from "lucide-react";

export default function ToggleVariants() {
  return (
    <HStack gap={3} justify="center">
      <Toggle variant="default" aria-label="Default toggle">
        <Bold />
      </Toggle>
      <Toggle variant="outline" aria-label="Outline toggle">
        <Italic />
      </Toggle>
    </HStack>
  );
}

Sizes

import { HStack, Toggle } from "@vesyl/ui-next";
import { Bold } from "lucide-react";

export default function ToggleSizes() {
  return (
    <HStack gap={3} justify="center" align="center">
      <Toggle size="sm" aria-label="Small toggle">
        <Bold />
      </Toggle>
      <Toggle size="md" aria-label="Medium toggle">
        <Bold />
      </Toggle>
      <Toggle size="lg" aria-label="Large toggle">
        <Bold />
      </Toggle>
    </HStack>
  );
}

Disabled

import { HStack, Toggle } from "@vesyl/ui-next";
import { Bold, Star } from "lucide-react";

export default function ToggleDisabled() {
  return (
    <HStack gap={3} justify="center">
      <Toggle disabled aria-label="Disabled toggle">
        <Bold />
      </Toggle>
      <Toggle disabled defaultPressed aria-label="Disabled pressed toggle">
        <Star />
      </Toggle>
    </HStack>
  );
}

Default pressed

import { HStack, Toggle } from "@vesyl/ui-next";
import { Star } from "lucide-react";

export default function ToggleDefaultPressed() {
  return (
    <HStack justify="center">
      <Toggle defaultPressed aria-label="Favorite">
        <Star />
        Favorite
      </Toggle>
    </HStack>
  );
}