Documentation Index
Fetch the complete documentation index at: https://mintlify.com/aeonzz/eo-n/llms.txt
Use this file to discover all available pages before exploring further.
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
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.
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>
);
}
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.