Toggle

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

Props

Types

interface ToggleProps extends ComponentProps<typeof TogglePrimitive.Root>, VariantProps<typeof toggleVariants> {
  variant?: "primary" | "secondary";
  size?: "sm" | "base" | "lg";
}

Variants

The Toggle component supports two visual styles:

// Default primary toggle
<Toggle>Primary</Toggle>

// Primary pressed state
<Toggle pressed>Primary Pressed</Toggle>

// Secondary toggle for alternative styling
<Toggle variant="secondary">Secondary</Toggle>

// Secondary pressed state
<Toggle variant="secondary" pressed>Secondary Pressed</Toggle>

Sizes

Choose from three different sizes:

// Small toggle for compact interfaces
<Toggle size="sm">Small</Toggle>

// Small pressed
<Toggle size="sm" pressed>Small Pressed</Toggle>

// Default size toggle
<Toggle>Default</Toggle>

// Default pressed
<Toggle pressed>Default Pressed</Toggle>

// Large toggle for prominent controls
<Toggle size="lg">Large</Toggle>

// Large pressed
<Toggle size="lg" pressed>Large Pressed</Toggle>

States

Toggle can be in different states:

// Disabled toggle
<Toggle disabled>Disabled</Toggle>

// Disabled and pressed
<Toggle disabled pressed>Disabled Pressed</Toggle>

Interactive Example

// Interactive toggles you can click
<div className="flex flex-col gap-4">
  <div className="grid grid-cols-2 gap-3">
    <Toggle>Favorite</Toggle>
    <Toggle variant="secondary">Bookmark</Toggle>
    <Toggle size="sm">Like</Toggle>
    <Toggle size="lg">Subscribe</Toggle>
  </div>
</div>

Usage

import { Toggle } from '@vuer-ai/vuer-uikit';

function MyComponent() {
  return (
    <div>
      <Toggle>Primary Toggle</Toggle>
      <Toggle variant="secondary">Secondary Toggle</Toggle>
      <Toggle size="sm">Small Toggle</Toggle>
      <Toggle size="lg">Large Toggle</Toggle>
      <Toggle disabled>Disabled Toggle</Toggle>
    </div>
  );
}

Basic Example

<Toggle>Toggle me</Toggle>

With Event Handler

<Toggle onPressedChange={(pressed) => console.log('Toggle pressed:', pressed)}>
  Toggle with Handler
</Toggle>