Toggle

Name: FivUI
Author: Fivex Labs

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

tsx

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

export function ToggleDemo() {
  return (
    <Toggle aria-label="Toggle bold">
      <Bold className="h-4 w-4" />
    </Toggle>
  )
}

Installation

CLI

bash

npx fivui add toggle

Manual

Copy and paste the following code into your project.

bash

npm install @radix-ui/react-toggle

components/ui/toggle.tsx

"use client"

import * as React from "react"
import * as TogglePrimitive from "@radix-ui/react-toggle"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const toggleVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
  {
    variants: {
      variant: {
        default: "bg-transparent",
        outline:
          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
      },
      size: {
        default: "h-10 px-3",
        sm: "h-9 px-2.5",
        lg: "h-11 px-5",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

const Toggle = React.forwardRef<
  React.ElementRef<typeof TogglePrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
    VariantProps<typeof toggleVariants>
>(({ className, variant, size, ...props }, ref) => (
  <TogglePrimitive.Root
    ref={ref}
    className={cn(toggleVariants({ variant, size, className }))}
    {...props}
  />
))

Toggle.displayName = TogglePrimitive.Root.displayName

export { Toggle, toggleVariants }

Usage

tsx

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

tsx

<Toggle>Toggle</Toggle>

Examples

Default

tsx

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

export function ToggleDemo() {
  return (
    <Toggle aria-label="Toggle bold">
      <Bold className="h-4 w-4" />
    </Toggle>
  )
}

Outline

tsx

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

export function ToggleOutline() {
  return (
    <Toggle variant="outline" aria-label="Toggle italic">
      <Italic className="h-4 w-4" />
    </Toggle>
  )
}

With Text

tsx

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

export function ToggleWithText() {
  return (
    <Toggle aria-label="Toggle italic">
      <Italic className="mr-2 h-4 w-4" />
      Italic
    </Toggle>
  )
}

Small

tsx

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

export function ToggleSmall() {
  return (
    <Toggle size="sm" aria-label="Toggle italic">
      <Italic className="h-4 w-4" />
    </Toggle>
  )
}

Large

tsx

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

export function ToggleLarge() {
  return (
    <Toggle size="lg" aria-label="Toggle italic">
      <Italic className="h-4 w-4" />
    </Toggle>
  )
}

Disabled

tsx

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

export function ToggleDisabled() {
  return (
    <Toggle aria-label="Toggle underline" disabled>
      <Underline className="h-4 w-4" />
    </Toggle>
  )
}

API Reference

Toggle

Prop	Type	Default	Description
`variant`	`"default" \| "outline"`	`"default"`	The visual style variant of the toggle
`size`	`"default" \| "sm" \| "lg"`	`"default"`	The size of the toggle
`pressed`	`boolean`	-	The controlled pressed state of the toggle
`defaultPressed`	`boolean`	`false`	The default pressed state when initially rendered
`onPressedChange`	`function`	-	Event handler called when the pressed state changes
`disabled`	`boolean`	`false`	When true, prevents the user from interacting with the toggle

Toggle inherits all props from Radix UI Toggle primitive.

View Radix Docs