a7:I[909850,["/_next/static/chunks/3-oldppc3cdn0.js","/_next/static/chunks/07ksm9-2ekd62.js","/_next/static/chunks/2g7jfqd9--bun.js","/_next/static/chunks/31kgouwxgdz30.js","/_next/static/chunks/0g_a--dgm_vx2.js","/_next/static/chunks/0wj_p_e20bygd.js","/_next/static/chunks/305fbm9-2kylm.js","/_next/static/chunks/35ku5yjbif25o.js","/_next/static/chunks/03gf-5_c1fhpw.js","/_next/static/chunks/0yra0wnwx6l3y.js","/_next/static/chunks/3mtcx1om0ufpk.js","/_next/static/chunks/0k7q93e3jov37.js","/_next/static/chunks/408vo-7izisls.js","/_next/static/chunks/1ra6b9l59hs1t.js","/_next/static/chunks/2lwbc7vr4n8gq.js","/_next/static/chunks/0vp4x8w8o2hc0.js","/_next/static/chunks/3cr3crpounju2.js","/_next/static/chunks/1td2r-9vo6pv5.js","/_next/static/chunks/20nvv431kujy3.js","/_next/static/chunks/0qe44_nk5f1zl.js","/_next/static/chunks/3nek2irthlc56.js","/_next/static/chunks/1f728deqjx2kz.js","/_next/static/chunks/18ajxbukqmopy.js","/_next/static/chunks/14mx-7p2q8y0b.js","/_next/static/chunks/20j41d7wd_sgo.js","/_next/static/chunks/23r04i55wnixy.js","/_next/static/chunks/2l8-oz74fa5ys.js","/_next/static/chunks/1af31cvxear8z.js","/_next/static/chunks/2eh1ne0xb6kel.js","/_next/static/chunks/1ms3so6ygrwar.js","/_next/static/chunks/42f3hommd-f3y.js","/_next/static/chunks/03s3pyenxnlya.js","/_next/static/chunks/1ihpugza2t6wp.js","/_next/static/chunks/2wlts9-d0fa8u.js","/_next/static/chunks/3wi8euz-zkel1.js","/_next/static/chunks/2xq470ey5-_lv.js","/_next/static/chunks/15w0zamt-sx0w.js","/_next/static/chunks/061nrwy7lfrr-.js","/_next/static/chunks/3us0tz8jgphgq.js","/_next/static/chunks/0pabg5jfcnriw.js","/_next/static/chunks/0bopwm34i7qq_.js","/_next/static/chunks/2ui0n41adci0h.js","/_next/static/chunks/07p56pwlf35-y.js","/_next/static/chunks/1vxnv67d7o8bj.js","/_next/static/chunks/0qnnlmu6qegbf.js","/_next/static/chunks/1rx6j5ec1e82z.js","/_next/static/chunks/07_9r9sz2g-x9.js","/_next/static/chunks/3_wfm093s4i0l.js","/_next/static/chunks/27m8-9kdgmv5-.js","/_next/static/chunks/2xd8zn4xsgv21.js","/_next/static/chunks/34-__-f_nugob.js","/_next/static/chunks/2dmx9eb8vn82s.js","/_next/static/chunks/2-znpd_m4tjmb.js","/_next/static/chunks/0i_kavar-12o-.js","/_next/static/chunks/39_vlg9zlrjtt.js","/_next/static/chunks/43g2v53fjy-xr.js","/_next/static/chunks/3lxsum0ik646y.js","/_next/static/chunks/226rudjv28qpw.js","/_next/static/chunks/1_78y4ocj8so4.js","/_next/static/chunks/2iovnmi2snpvb.js","/_next/static/chunks/3q95ud_qna442.js","/_next/static/chunks/3drn-i4ns1ejw.js","/_next/static/chunks/1twt84sc4-ltn.js","/_next/static/chunks/1ofk7fxn2ap85.js","/_next/static/chunks/273y382-ir8z9.js","/_next/static/chunks/40dmkeri0spkb.js","/_next/static/chunks/2gtvdrrwedb1r.js","/_next/static/chunks/12srbch7k-eze.js","/_next/static/chunks/1z73ew93q6a41.js","/_next/static/chunks/0wkdc4utnv_ti.js","/_next/static/chunks/2ibgtc36h_5pa.js","/_next/static/chunks/3iz1h_39iuzrk.js","/_next/static/chunks/0g20qq0t0gp06.js","/_next/static/chunks/349v30kq-bc42.js","/_next/static/chunks/0jory6vqhsq7p.js","/_next/static/chunks/0yv6gsuojapf3.js","/_next/static/chunks/11b_g6-m7flig.js","/_next/static/chunks/2p6vpq4xewuxu.js","/_next/static/chunks/2peg5doc0hze9.js","/_next/static/chunks/20s1bpchvmdwd.js","/_next/static/chunks/2oo16dwv5pyxt.js","/_next/static/chunks/2-idflq01vgp3.js","/_next/static/chunks/1tf3jwzn01hji.js","/_next/static/chunks/09tuq-df7q4ee.js","/_next/static/chunks/38r70eu8b0onq.js","/_next/static/chunks/2ko58wmnij6u2.js","/_next/static/chunks/3nu5uoszutw74.js","/_next/static/chunks/2-jpc5jqda0jm.js","/_next/static/chunks/2r4lqwybybq1x.js","/_next/static/chunks/393wg5igw4_z0.js","/_next/static/chunks/14ommr7mug_kh.js","/_next/static/chunks/340emax6-2q3d.js","/_next/static/chunks/0mmlrphq7bx7o.js","/_next/static/chunks/1bhj4t4poi1cm.js","/_next/static/chunks/1ti8cx6_hl0hv.js","/_next/static/chunks/3uipf5q6w14eo.js","/_next/static/chunks/0oo0d1qoxv4t_.js","/_next/static/chunks/2f7drku6salwi.js","/_next/static/chunks/1twnjg80ckh77.js","/_next/static/chunks/0q2uz3_g8i4w9.js","/_next/static/chunks/0fsg19a662tv4.js"],"CodeCollapsibleWrapper"] a0:T12bc,

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

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

export function ToggleOutline() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle variant="outline" aria-label="Toggle italic">
        <ItalicIcon />
        Italic
      </Toggle>
      <Toggle variant="outline" aria-label="Toggle bold">
        <BoldIcon />
        Bold
      </Toggle>
    </div>
  )
}

91:["$","div",null,{"className":"relative","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":["$undefined",["$","$L8f",null,{"value":"import { BoldIcon, ItalicIcon } from \"lucide-react\"\n\nimport { Toggle } from \"@/components/ui/toggle\"\n\nexport function ToggleOutline() {\n return (\n

\n \n \n Italic\n \n \n \n Bold\n \n

\n )\n}\n"}],["$","div",null,{"data-not-typeset":true,"dangerouslySetInnerHTML":{"__html":"$a0"}}]]}]}] a1:Tac3,

import { ItalicIcon } from "lucide-react"

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

export function ToggleText() {
  return (
    <Toggle aria-label="Toggle italic">
      <ItalicIcon />
      Italic
    </Toggle>
  )
}

94:["$","div",null,{"className":"relative","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":["$undefined",["$","$L8f",null,{"value":"import { ItalicIcon } from \"lucide-react\"\n\nimport { Toggle } from \"@/components/ui/toggle\"\n\nexport function ToggleText() {\n return (\n \n \n Italic\n \n )\n}\n"}],["$","div",null,{"data-not-typeset":true,"dangerouslySetInnerHTML":{"__html":"$a1"}}]]}]}] a2:T40c,

import { ItalicIcon } from "lucide-react"

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

95:["$","div",null,{"className":"relative","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":["$undefined",["$","$L8f",null,{"value":"import { ItalicIcon } from \"lucide-react\"\n\nimport { Toggle } from \"@/components/ui/toggle\""}],["$","div",null,{"data-not-typeset":true,"dangerouslySetInnerHTML":{"__html":"$a2"}}]]}]}] a3:T1552,

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

export function ToggleSizes() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle variant="outline" aria-label="Toggle small" size="sm">
        Small
      </Toggle>
      <Toggle variant="outline" aria-label="Toggle default" size="default">
        Default
      </Toggle>
      <Toggle variant="outline" aria-label="Toggle large" size="lg">
        Large
      </Toggle>
    </div>
  )
}

97:["$","div",null,{"className":"relative","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":["$undefined",["$","$L8f",null,{"value":"import { Toggle } from \"@/components/ui/toggle\"\n\nexport function ToggleSizes() {\n return (\n

\n \n Small\n \n \n Default\n \n \n Large\n \n

\n )\n}\n"}],["$","div",null,{"data-not-typeset":true,"dangerouslySetInnerHTML":{"__html":"$a3"}}]]}]}] a4:T402,

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

export function ToggleSizes() {

98:["$","div",null,{"className":"relative","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":["$undefined",["$","$L8f",null,{"value":"import { Toggle } from \"@/components/ui/toggle\"\n\nexport function ToggleSizes() {"}],["$","div",null,{"data-not-typeset":true,"dangerouslySetInnerHTML":{"__html":"$a4"}}]]}]}] a5:Tf62,

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

export function ToggleDisabled() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle aria-label="Toggle disabled" disabled>
        Disabled
      </Toggle>
      <Toggle variant="outline" aria-label="Toggle disabled outline" disabled>
        Disabled
      </Toggle>
    </div>
  )
}

9a:["$","div",null,{"className":"relative","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":["$undefined",["$","$L8f",null,{"value":"import { Toggle } from \"@/components/ui/toggle\"\n\nexport function ToggleDisabled() {\n return (\n

\n \n Disabled\n \n \n Disabled\n \n

\n )\n}\n"}],["$","div",null,{"data-not-typeset":true,"dangerouslySetInnerHTML":{"__html":"$a5"}}]]}]}] a6:T405,

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

export function ToggleDisabled() {

9b:["$","div",null,{"className":"relative","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":["$undefined",["$","$L8f",null,{"value":"import { Toggle } from \"@/components/ui/toggle\"\n\nexport function ToggleDisabled() {"}],["$","div",null,{"data-not-typeset":true,"dangerouslySetInnerHTML":{"__html":"$a6"}}]]}]}] a8:T49c,M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375za9:T812,"use client" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "cn" import { Toggle as TogglePrimitive } from "radix-ui" const toggleVariants = cva( "group/toggle inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-lg text-[13px] font-medium whitespace-nowrap text-muted-foreground transition-[color,background-color,box-shadow] duration-fast ease-spring outline-none hover:bg-hover! hover:bg-muted hover:text-foreground focus-visible:ring-1! focus-visible:ring-[3px] focus-visible:ring-ring active:bg-active! disabled:pointer-events-none disabled:opacity-50 aria-invalid:ring-1 aria-invalid:ring-destructive/50 aria-pressed:bg-active! aria-pressed:text-foreground data-[state=on]:bg-active! data-[state=on]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-[1.5] [&_svg]:transition-[stroke-width] [&_svg]:duration-fast hover:[&_svg]:stroke-2 aria-pressed:[&_svg]:stroke-2 data-[state=on]:[&_svg]:stroke-2 [&_svg:not([class*='size-'])]:size-4", { variants: { variant: { default: "bg-transparent", outline: "border border-border bg-transparent", }, size: { default: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", sm: "h-7 min-w-7 gap-1 px-2 text-[12px] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5", lg: "h-10 min-w-10 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5", }, }, defaultVariants: { variant: "default", size: "default", }, } ) function Toggle({ className, variant = "default", size = "default", ...props }: React.ComponentProps & VariantProps) { return ( ) } export { Toggle, toggleVariants } 8e:["$","$La7",null,{"className":"$undefined","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":[["$","figcaption",null,{"data-rehype-pretty-code-title":"","className":"flex items-center gap-2 text-code-foreground [&_svg]:size-4 [&_svg]:text-code-foreground [&_svg]:opacity-70","data-language":"tsx","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 24 24","className":"fill-foreground","children":["$","path",null,{"d":"$a8"}]}],"components/ui/toggle.tsx"]}],["$","$L8f",null,{"value":"$a9"}],"$Laa"]}]}] ab:T416,

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

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

92:["$","div",null,{"className":"relative","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":["$undefined",["$","$L8f",null,{"value":"import { BoldIcon, ItalicIcon } from \"lucide-react\"\n\nimport { Toggle } from \"@/components/ui/toggle\""}],["$","div",null,{"data-not-typeset":true,"dangerouslySetInnerHTML":{"__html":"$ab"}}]]}]}] ac:Td18,

import { BookmarkIcon } from "lucide-react"

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

export function ToggleDemo() {
  return (
    <Toggle aria-label="Toggle bookmark" size="sm" variant="outline">
      <BookmarkIcon className="group-data-[state=on]/toggle:fill-foreground" />
      Bookmark
    </Toggle>
  )
}

71:["$","div",null,{"className":"relative","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":["$undefined",["$","$L8f",null,{"value":"import { BookmarkIcon } from \"lucide-react\"\n\nimport { Toggle } from \"@/components/ui/toggle\"\n\nexport function ToggleDemo() {\n return (\n \n \n Bookmark\n \n )\n}\n"}],["$","div",null,{"data-not-typeset":true,"dangerouslySetInnerHTML":{"__html":"$ac"}}]]}]}] ad:T40e,

import { BookmarkIcon } from "lucide-react"

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

72:["$","div",null,{"className":"relative","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":["$undefined",["$","$L8f",null,{"value":"import { BookmarkIcon } from \"lucide-react\"\n\nimport { Toggle } from \"@/components/ui/toggle\""}],["$","div",null,{"data-not-typeset":true,"dangerouslySetInnerHTML":{"__html":"$ad"}}]]}]}]

Search documentation

Installation#

Usage#

Outline#

With Text#

Size#

Disabled#

API Reference#

Installation

Usage

Outline

With Text

Size

Disabled

API Reference