Components

Toggle

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

example.tsx

Import

tsx

import { AppToggle } from "@/components/primitives/AppToggle"

Outline

Use variant="outline" for an outline style.

With Icon

Icons can be used inside a toggle. Use the group-data-[state=on]/toggle:fill-* class to style the icon when the toggle is on.

Sizes

Use the size prop to change the size of the toggle.

API Reference

AppToggle extends all native <button> HTML attributes.

Prop	Type	Default	Description
variant	"default" \| "outline"	"default"	The visual style of the toggle.
size	"default" \| "sm" \| "lg"	"default"	The size of the toggle.
pressed	boolean	—	The controlled pressed state of the toggle.
onPressedChange	(pressed: boolean) => void	—	Callback fired when the pressed state changes.
className	string	—	Additional Tailwind classes merged via cn().

Source

src/components/primitives/AppToggle.tsx

"use client"

import { Toggle, toggleVariants } from "../ui/toggle"
import type { VariantProps } from "class-variance-authority"

type AppToggleProps = React.ComponentProps<typeof Toggle> &
  VariantProps<typeof toggleVariants>

function AppToggle(props: AppToggleProps) {
  return (
    <Toggle {...props} />
  )
}

export { AppToggle }