Toggle

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

Installation

npx love-ui@latest add toggle

Usage

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

<Toggle>Toggle</Toggle>

Examples

Outline

With Icon

import { BoldIcon } from "lucide-react"

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

export default function ToggleWithIcon() {
  return (
    <Toggle variant="outline" aria-label="Toggle bold">
      <BoldIcon />
    </Toggle>
  )
}

Small Size

Large Size

Disabled

Icon Group

import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"

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

export default function ToggleIconGroup() {
  return (
    <div className="flex items-center gap-1">
      <Toggle variant="outline" aria-label="Toggle bold">
        <BoldIcon />
      </Toggle>
      <Toggle variant="outline" aria-label="Toggle italic">
        <ItalicIcon />
      </Toggle>
      <Toggle variant="outline" aria-label="Toggle underline">
        <UnderlineIcon />
      </Toggle>
    </div>
  )
}

Comparing with Radix / shadcn

If you’re already familiar with Radix UI and shadcn/ui, this guide highlights the small differences and similarities so you can get started with loveui quickly.

Quick Checklist

If you used asChild on parts, switch to the render prop

Additional Notes

Size Comparison

loveui toggle sizes are more compact compared to shadcn/ui, making them better suited for dense applications:

Size	Height (shadcn/ui)	Height (loveui)
`sm`	32px	28px
`default`	36px	32px
`lg`	-	36px

So, for example, if you were using the default size in shadcn/ui and you want to preserve the original height, you should use the lg size in loveui.

Toast Toggle Group