Toggle

The Toggle component is a button that can be toggled on and off. It’s useful for binary options like bold text, italics, or favorites. Built on top of Base UI’s Toggle component with customizable variants and sizes.

Installation

CLI
Manual

npx shadcn@latest add @eo-n/toggle

Install dependencies

First, install the required packages:

npm install @base-ui/react class-variance-authority

Copy component code

Copy and paste the following code into your project at components/ui/toggle.tsx:

"use client";

import * as React from "react";
import { Toggle as ToggleRoot } from "@base-ui/react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const toggleVariants = cva(
  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[pressed]:bg-accent data-[pressed]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
  {
    variants: {
      variant: {
        default: "bg-transparent",
        outline:
          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
      },
      size: {
        default: "h-9 px-2 min-w-9 min-h-9",
        sm: "h-8 px-1.5 min-w-8 min-h-8",
        lg: "h-10 px-2.5 min-w-10 min-h-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);

export type ToggleVariants = VariantProps<typeof toggleVariants>;

interface ToggleProps
  extends React.ComponentProps<typeof ToggleRoot>,
    ToggleVariants {}

function Toggle({ className, variant, size, ...props }: ToggleProps) {
  return (
    <ToggleRoot
      data-slot="toggle"
      className={cn(toggleVariants({ variant, size, className }))}
      {...props}
    />
  );
}

export { Toggle, toggleVariants };

Update imports

Update the import paths to match your project setup.

Usage

Import the toggle component:

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

<Toggle aria-label="Toggle bold">
  <Bold className="size-4" />
</Toggle>

API Reference

Props Extends React.ComponentProps<typeof ToggleRoot> from Base UI.

Prop	Type	Default	Description
`variant`	`"default" \| "outline"`	`"default"`	The visual style variant
`size`	`"default" \| "sm" \| "lg"`	`"default"`	The size of the toggle
`defaultPressed`	`boolean`	`false`	The initial pressed state (uncontrolled)
`pressed`	`boolean`	-	The controlled pressed state
`onPressedChange`	`(pressed: boolean) => void`	-	Callback when pressed state changes
`disabled`	`boolean`	`false`	Whether the toggle is disabled

TypeScript

import type { ToggleVariants } from "@/components/ui/toggle";

type ToggleVariants = {
  variant?: "default" | "outline";
  size?: "default" | "sm" | "lg";
};

Examples

Default

The default toggle with transparent background:

import { Heart } from "lucide-react";
import { Toggle } from "@/components/ui/toggle";

export default function ToggleDemo() {
  return (
    <Toggle aria-label="Toggle like">
      <Heart className="size-4" />
    </Toggle>
  );
}

Outline

Toggle with a border and subtle shadow:

import { Bold } from "lucide-react";
import { Toggle } from "@/components/ui/toggle";

export default function ToggleOutline() {
  return (
    <Toggle variant="outline" aria-label="Toggle bold">
      <Bold className="size-4" />
    </Toggle>
  );
}

With Text

Combine icons with text labels:

import { Italic } from "lucide-react";
import { Toggle } from "@/components/ui/toggle";

export default function ToggleWithText() {
  return (
    <Toggle variant="outline" aria-label="Toggle italic">
      <Italic className="size-4" />
      Italic
    </Toggle>
  );
}

Sizes

The toggle component comes in three sizes:

import { Bold } from "lucide-react";
import { Toggle } from "@/components/ui/toggle";

export default function ToggleSmall() {
  return (
    <Toggle size="sm" variant="outline">
      <Bold className="size-4" />
    </Toggle>
  );
}

Disabled

Disable user interaction:

import { Underline } from "lucide-react";
import { Toggle } from "@/components/ui/toggle";

export default function ToggleDisabled() {
  return (
    <Toggle variant="outline" disabled aria-label="Toggle underline">
      <Underline className="size-4" />
    </Toggle>
  );
}

Controlled

Control the toggle state with React state:

import { useState } from "react";
import { Bold } from "lucide-react";
import { Toggle } from "@/components/ui/toggle";

export default function ToggleControlled() {
  const [pressed, setPressed] = useState(false);

  return (
    <div className="flex flex-col gap-2">
      <Toggle
        variant="outline"
        pressed={pressed}
        onPressedChange={setPressed}
        aria-label="Toggle bold"
      >
        <Bold className="size-4" />
      </Toggle>
      <p className="text-sm text-muted-foreground">
        Bold is {pressed ? "on" : "off"}
      </p>
    </div>
  );
}

Variants

Default

Transparent background with hover and pressed states:

<Toggle>Toggle me</Toggle>

Outline

Bordered variant with background on hover:

<Toggle variant="outline">Toggle me</Toggle>

Accessibility

Uses the button role with aria-pressed attribute
Supports keyboard navigation (Space and Enter keys)
Clearly indicates pressed state to screen readers
Always include an aria-label for icon-only toggles

Base UI Reference

For more information about the underlying Base UI Toggle component, see the Base UI documentation.

Getting Started

Guides

Form Components

Layout Components

Navigation Components

Overlay Components

Display Components

Utility Components

Toggle

Installation

Usage

API Reference

Toggle

TypeScript

Examples

Default

Outline

With Text

Sizes

Disabled

Controlled

Variants

Default

Outline

Accessibility

Base UI Reference

Build docs developers (and LLMs) love

Getting Started

Guides

Form Components

Layout Components

Navigation Components

Overlay Components

Display Components

Utility Components

​Installation

​Usage

​API Reference

​Toggle

​TypeScript

​Examples

​Default

​Outline

​With Text

​Sizes

​Disabled

​Controlled

​Variants

​Default

​Outline

​Accessibility

​Base UI Reference

Build docs developers (and LLMs) love

Installation

Usage

API Reference

Toggle

TypeScript

Examples

Default

Outline

With Text

Sizes

Disabled

Controlled

Variants

Default

Outline

Accessibility

Base UI Reference