Toggle

Usage

import { Toggle } from '@jamie/ui/toggle'
import { BoldIcon } from 'lucide-react'
 
export function ToggleDemo() {
  return (
    <Toggle aria-label="Toggle bold">
      <BoldIcon className="size-4" />
    </Toggle>
  )
}

Outline

Use variant="outline" for a bordered toggle style.

import { Toggle } from '@jamie/ui/toggle'
import { ItalicIcon } from 'lucide-react'
 
export function ToggleOutlineDemo() {
  return (
    <Toggle variant="outline" aria-label="Toggle italic">
      <ItalicIcon className="size-4" />
    </Toggle>
  )
}

With Text

Combine an icon with a text label inside the toggle.

import { Toggle } from '@jamie/ui/toggle'
import { MicIcon } from 'lucide-react'
 
export function ToggleWithTextDemo() {
  return (
    <Toggle aria-label="Toggle recording">
      <MicIcon className="size-4" />
      Recording
    </Toggle>
  )
}

Sizes

Use the size prop to choose between sm, default, and lg.

import { Toggle } from '@jamie/ui/toggle'
import { BoldIcon } from 'lucide-react'
 
export function ToggleSizesDemo() {
  return (
    <div className="flex items-center gap-2">
      <Toggle size="sm" aria-label="Toggle bold">
        <BoldIcon className="size-3.5" />
      </Toggle>
      <Toggle size="default" aria-label="Toggle bold">
        <BoldIcon className="size-4" />
      </Toggle>
      <Toggle size="lg" aria-label="Toggle bold">
        <BoldIcon className="size-4" />
      </Toggle>
    </div>
  )
}

Disabled

import { Toggle } from '@jamie/ui/toggle'
import { BoldIcon } from 'lucide-react'
 
export function ToggleDisabledDemo() {
  return (
    <Toggle disabled aria-label="Toggle bold">
      <BoldIcon className="size-4" />
    </Toggle>
  )
}