Toggle

"use client"

import * as React from "react"
import { BoldIcon, WrapTextIcon } from "lucide-react"
import { Toggle } from "@/components/candor/ui/toggle"
import { TooltipProvider } from "@/components/candor/ui/tooltip"

export default function Example() {
  // Nothing is pressed until the person presses it.
  const [wrap, setWrap] = React.useState(false)
  return (
    <TooltipProvider>
      <div className="flex flex-wrap items-center gap-3">
        <Toggle pressed={wrap} onPressedChange={setWrap} aria-label="Wrap long lines">
          <WrapTextIcon />
          {wrap ? "Wrapping" : "Wrap"}
        </Toggle>
        <Toggle variant="outline" size="sm" aria-label="Bold">
          <BoldIcon />
        </Toggle>
        <Toggle variant="outline" locked="Formatting is off while the draft is read-only.">
          Monospace
        </Toggle>
      </div>
    </TooltipProvider>
  )
}