Toggle
A toggle component that allows the user to toggle between on and off states.
Preview
Loading...
import { Toggle } from "@/components/ui/Toggle";
import {
FontItalicIcon,
HeartIcon,
HeartFilledIcon,
} from "@radix-ui/react-icons";
export function ToggleDemo() {
return {
return (
<div className="flex items-center gap-2">
<Toggle>
<FontItalicIcon />
</Toggle>
</div>
);
};Installation
Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces
pnpm dlx shadcn@latest add @aura/toggleManual
Install the following dependencies:
pnpm install class-variance-authority radix-uiCopy and paste the class names utility into your utils/class-names.ts file.
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Copy and paste the Toggle component into your components/ui/Toggle.tsx file.
"use client";
import * as React from "react";
import { Toggle as TogglePrimitive } from "radix-ui";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/utils/class-names";
const toggleVariants = cva(
"inline-flex items-center justify-center gap-2 data-[state=on]:bg-gray-4 data-[state=on]:hover:bg-gray-3",
{
variants: {
variant: {
default:
"button-pill border border-gray-6 text-gray-11 bg-gray-2 hover:bg-gray-3",
},
size: {
default: "w-3 h-3 p-0",
xs: "h-2.5",
sm: "h-3",
md: "h-4",
lg: "h-5",
xl: "h-6",
icon: "w-3 h-3 p-0",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
);
function Toggle({
className,
variant,
size,
...props
}: React.ComponentProps<typeof TogglePrimitive.Root> &
VariantProps<typeof toggleVariants>) {
return (
<TogglePrimitive.Root
data-slot="toggle"
className={cn(toggleVariants({ variant, size, className }))}
{...props}
/>
);
}
export { Toggle, toggleVariants };Usage
ToggleIcons
export const ToggleIcons = () => {
return (
<Toggle className="group">
<HeartIcon className="block group-data-[state=on]:hidden icon" />
<HeartFilledIcon className="hidden group-data-[state=on]:block text-accent-9 icon" />
</Toggle>
);
};