- Docs
- components
- Toggle
Toggle
A two-state button that can be either on or off.
Copy and paste the following code into your project.
"use client";
import { ToggleButton } from "react-aria-components";
import type { VariantProps } from "~/lib/cva";
import { ToggleStyles } from "./styles";
export interface ToggleProps
extends React.ComponentProps<typeof ToggleButton>,
VariantProps<typeof ToggleStyles> {}
export function Toggle({ className, variant, size, ...props }: ToggleProps) {
return (
<ToggleButton
{...props}
className={(values) =>
ToggleStyles({
variant,
size,
className:
typeof className === "function" ? className(values) : className,
})
}
/>
);
}
Update the import paths to match your project setup.
import { Toggle } from "~/components/ui/toggle";