[{"data":1,"prerenderedAt":583},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Fbadge":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Fbadge":578},[4,31,178],{"title":5,"path":6,"stem":7,"children":8,"page":30},"Getting Started","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started",[9,14,18,22,26],{"title":10,"path":11,"stem":12,"status":13,"badge":13},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002F1.getting-started\u002F1.introduction",null,{"title":15,"path":16,"stem":17,"status":13,"badge":13},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation",{"title":19,"path":20,"stem":21,"status":13,"badge":13},"Theming","\u002Fdocs\u002Fgetting-started\u002Ftheming","docs\u002F1.getting-started\u002F3.theming",{"title":23,"path":24,"stem":25,"status":13,"badge":13},"Accessibility & reduced motion","\u002Fdocs\u002Fgetting-started\u002Faccessibility","docs\u002F1.getting-started\u002F4.accessibility",{"title":27,"path":28,"stem":29,"status":13,"badge":13},"Sound","\u002Fdocs\u002Fgetting-started\u002Fsound","docs\u002F1.getting-started\u002F5.sound",false,{"title":32,"path":33,"stem":34,"children":35,"page":30},"Components","\u002Fdocs\u002Fcomponents","docs\u002F2.components",[36,40,44,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,126,130,134,138,142,146,150,154,158,162,166,170,174],{"title":37,"path":38,"stem":39,"status":13,"badge":13},"Button","\u002Fdocs\u002Fcomponents\u002Fbutton","docs\u002F2.components\u002F01.button",{"title":41,"path":42,"stem":43,"status":13,"badge":13},"Spinner","\u002Fdocs\u002Fcomponents\u002Fspinner","docs\u002F2.components\u002F02.spinner",{"title":45,"path":46,"stem":47,"status":13,"badge":48},"Toggle","\u002Fdocs\u002Fcomponents\u002Ftoggle","docs\u002F2.components\u002F03.toggle","experimental",{"title":50,"path":51,"stem":52,"status":13,"badge":13},"Switch","\u002Fdocs\u002Fcomponents\u002Fswitch","docs\u002F2.components\u002F04.switch",{"title":54,"path":55,"stem":56,"status":13,"badge":13},"Checkbox","\u002Fdocs\u002Fcomponents\u002Fcheckbox","docs\u002F2.components\u002F05.checkbox",{"title":58,"path":59,"stem":60,"status":13,"badge":13},"Radio Group","\u002Fdocs\u002Fcomponents\u002Fradio-group","docs\u002F2.components\u002F06.radio-group",{"title":62,"path":63,"stem":64,"status":13,"badge":48},"Input","\u002Fdocs\u002Fcomponents\u002Finput","docs\u002F2.components\u002F07.input",{"title":66,"path":67,"stem":68,"status":13,"badge":13},"Slider","\u002Fdocs\u002Fcomponents\u002Fslider","docs\u002F2.components\u002F08.slider",{"title":70,"path":71,"stem":72,"status":13,"badge":13},"Progress","\u002Fdocs\u002Fcomponents\u002Fprogress","docs\u002F2.components\u002F09.progress",{"title":74,"path":75,"stem":76,"status":13,"badge":48},"Select","\u002Fdocs\u002Fcomponents\u002Fselect","docs\u002F2.components\u002F10.select",{"title":78,"path":79,"stem":80,"status":13,"badge":13},"Popover","\u002Fdocs\u002Fcomponents\u002Fpopover","docs\u002F2.components\u002F11.popover",{"title":82,"path":83,"stem":84,"status":13,"badge":13},"Dropdown Menu","\u002Fdocs\u002Fcomponents\u002Fdropdown-menu","docs\u002F2.components\u002F12.dropdown-menu",{"title":86,"path":87,"stem":88,"status":13,"badge":13},"Tooltip","\u002Fdocs\u002Fcomponents\u002Ftooltip","docs\u002F2.components\u002F13.tooltip",{"title":90,"path":91,"stem":92,"status":13,"badge":13},"Tabs","\u002Fdocs\u002Fcomponents\u002Ftabs","docs\u002F2.components\u002F14.tabs",{"title":94,"path":95,"stem":96,"status":13,"badge":48},"Accordion","\u002Fdocs\u002Fcomponents\u002Faccordion","docs\u002F2.components\u002F15.accordion",{"title":98,"path":99,"stem":100,"status":13,"badge":48},"Dialog","\u002Fdocs\u002Fcomponents\u002Fdialog","docs\u002F2.components\u002F16.dialog",{"title":102,"path":103,"stem":104,"status":13,"badge":48},"Alert Dialog","\u002Fdocs\u002Fcomponents\u002Falert-dialog","docs\u002F2.components\u002F17.alert-dialog",{"title":106,"path":107,"stem":108,"status":13,"badge":48},"Sheet","\u002Fdocs\u002Fcomponents\u002Fsheet","docs\u002F2.components\u002F18.sheet",{"title":110,"path":111,"stem":112,"status":13,"badge":48},"Drawer","\u002Fdocs\u002Fcomponents\u002Fdrawer","docs\u002F2.components\u002F19.drawer",{"title":114,"path":115,"stem":116,"status":13,"badge":13},"Toaster","\u002Fdocs\u002Fcomponents\u002Ftoaster","docs\u002F2.components\u002F20.toaster",{"title":118,"path":119,"stem":120,"status":13,"badge":48},"Page transition","\u002Fdocs\u002Fcomponents\u002Fpage-transition","docs\u002F2.components\u002F21.page-transition",{"title":122,"path":123,"stem":124,"status":125,"badge":13},"Blob","\u002Fdocs\u002Fcomponents\u002Fblob","docs\u002F2.components\u002F22.blob","soon",{"title":127,"path":128,"stem":129,"status":13,"badge":48},"Command","\u002Fdocs\u002Fcomponents\u002Fcommand","docs\u002F2.components\u002F23.command",{"title":131,"path":132,"stem":133,"status":13,"badge":48},"Combobox","\u002Fdocs\u002Fcomponents\u002Fcombobox","docs\u002F2.components\u002F24.combobox",{"title":135,"path":136,"stem":137,"status":13,"badge":48},"NumberField","\u002Fdocs\u002Fcomponents\u002Fnumber-field","docs\u002F2.components\u002F25.number-field",{"title":139,"path":140,"stem":141,"status":13,"badge":48},"InputOTP","\u002Fdocs\u002Fcomponents\u002Finput-otp","docs\u002F2.components\u002F26.input-otp",{"title":143,"path":144,"stem":145,"status":13,"badge":48},"Hover Card","\u002Fdocs\u002Fcomponents\u002Fhover-card","docs\u002F2.components\u002F27.hover-card",{"title":147,"path":148,"stem":149,"status":13,"badge":48},"Context Menu","\u002Fdocs\u002Fcomponents\u002Fcontext-menu","docs\u002F2.components\u002F28.context-menu",{"title":151,"path":152,"stem":153,"status":13,"badge":48},"Skeleton","\u002Fdocs\u002Fcomponents\u002Fskeleton","docs\u002F2.components\u002F29.skeleton",{"title":155,"path":156,"stem":157,"status":13,"badge":48},"Badge","\u002Fdocs\u002Fcomponents\u002Fbadge","docs\u002F2.components\u002F30.badge",{"title":159,"path":160,"stem":161,"status":13,"badge":48},"Card","\u002Fdocs\u002Fcomponents\u002Fcard","docs\u002F2.components\u002F31.card",{"title":163,"path":164,"stem":165,"status":13,"badge":48},"Avatar","\u002Fdocs\u002Fcomponents\u002Favatar","docs\u002F2.components\u002F32.avatar",{"title":167,"path":168,"stem":169,"status":13,"badge":48},"Separator","\u002Fdocs\u002Fcomponents\u002Fseparator","docs\u002F2.components\u002F33.separator",{"title":171,"path":172,"stem":173,"status":13,"badge":48},"Label","\u002Fdocs\u002Fcomponents\u002Flabel","docs\u002F2.components\u002F34.label",{"title":175,"path":176,"stem":177,"status":13,"badge":48},"Sidebar","\u002Fdocs\u002Fcomponents\u002Fsidebar","docs\u002F2.components\u002F35.sidebar",{"title":179,"path":180,"stem":181,"children":182,"page":30},"Core","\u002Fdocs\u002Fcore","docs\u002F3.core",[183],{"title":184,"path":185,"stem":186,"status":13,"badge":13},"API reference","\u002Fdocs\u002Fcore\u002Fapi","docs\u002F3.core\u002F1.api",{"id":188,"title":155,"badge":48,"body":189,"description":573,"extension":574,"meta":575,"navigation":340,"path":156,"seo":576,"status":13,"stem":157,"__hash__":577},"docs\u002Fdocs\u002F2.components\u002F30.badge.md",{"type":190,"value":191,"toc":565},"minimark",[192,201,221,237,241,259,263,421,425,436,439,443,446,452,530,541,545,548,552,561],[193,194,197],"playground",{"caption":195,"name":196},"Hover the link badges. Customize changes the first one.","badge",[198,199],"demo-static-set",{"set":200},"badge-links",[202,203,205],"callout",{"type":204},"alpha",[206,207,208,212,213,216,217,220],"p",{},[209,210,211],"code",{},"@goopui\u002Fvue"," and ",[209,214,215],{},"@goopui\u002Fnuxt"," are in alpha, so APIs may still change. The badges on this page are the real ",[209,218,219],{},"GoopBadge",", and the code below is exactly what you write.",[206,222,223,225,226,212,229,232,233,236],{},[209,224,219],{}," is shadcn-vue's Badge, with the same variants and classes. ",[209,227,228],{},"as",[209,230,231],{},"asChild"," come from reka-ui's ",[209,234,235],{},"Primitive",", so a badge can render as a link, a button, or your router link.",[238,239,15],"h2",{"id":240},"installation",[206,242,243,244,246,247,249,250,255,256,258],{},"Install ",[209,245,215],{}," or ",[209,248,211],{}," as shown on the ",[251,252,254],"a",{"href":253},"\u002Fdocs\u002Fcomponents\u002Fbutton#installation","Button page",". The Nuxt module auto-imports ",[209,257,219],{},".",[238,260,262],{"id":261},"usage","Usage",[264,265,270],"pre",{"className":266,"code":267,"language":268,"meta":269,"style":269},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\n\u002F\u002F Nuxt auto-imports this. In plain Vue, import it:\nimport { GoopBadge } from '@goopui\u002Fvue'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopBadge>Badge\u003C\u002FGoopBadge>\n  \u003CGoopBadge as-child>\n    \u003Ca href=\"\u002Fchangelog\">Changelog\u003C\u002Fa>\n  \u003C\u002FGoopBadge>\n\u003C\u002Ftemplate>\n","vue","",[209,271,272,302,309,325,335,342,352,367,379,402,412],{"__ignoreMap":269},[273,274,277,281,285,289,292,295,299],"span",{"class":275,"line":276},"line",1,[273,278,280],{"class":279},"sVt8B","\u003C",[273,282,284],{"class":283},"s9eBZ","script",[273,286,288],{"class":287},"sScJk"," setup",[273,290,291],{"class":287}," lang",[273,293,294],{"class":279},"=",[273,296,298],{"class":297},"sZZnC","\"ts\"",[273,300,301],{"class":279},">\n",[273,303,305],{"class":275,"line":304},2,[273,306,308],{"class":307},"sJ8bj","\u002F\u002F Nuxt auto-imports this. In plain Vue, import it:\n",[273,310,312,316,319,322],{"class":275,"line":311},3,[273,313,315],{"class":314},"szBVR","import",[273,317,318],{"class":279}," { GoopBadge } ",[273,320,321],{"class":314},"from",[273,323,324],{"class":297}," '@goopui\u002Fvue'\n",[273,326,328,331,333],{"class":275,"line":327},4,[273,329,330],{"class":279},"\u003C\u002F",[273,332,284],{"class":283},[273,334,301],{"class":279},[273,336,338],{"class":275,"line":337},5,[273,339,341],{"emptyLinePlaceholder":340},true,"\n",[273,343,345,347,350],{"class":275,"line":344},6,[273,346,280],{"class":279},[273,348,349],{"class":283},"template",[273,351,301],{"class":279},[273,353,355,358,360,363,365],{"class":275,"line":354},7,[273,356,357],{"class":279},"  \u003C",[273,359,219],{"class":283},[273,361,362],{"class":279},">Badge\u003C\u002F",[273,364,219],{"class":283},[273,366,301],{"class":279},[273,368,370,372,374,377],{"class":275,"line":369},8,[273,371,357],{"class":279},[273,373,219],{"class":283},[273,375,376],{"class":287}," as-child",[273,378,301],{"class":279},[273,380,382,385,387,390,392,395,398,400],{"class":275,"line":381},9,[273,383,384],{"class":279},"    \u003C",[273,386,251],{"class":283},[273,388,389],{"class":287}," href",[273,391,294],{"class":279},[273,393,394],{"class":297},"\"\u002Fchangelog\"",[273,396,397],{"class":279},">Changelog\u003C\u002F",[273,399,251],{"class":283},[273,401,301],{"class":279},[273,403,405,408,410],{"class":275,"line":404},10,[273,406,407],{"class":279},"  \u003C\u002F",[273,409,219],{"class":283},[273,411,301],{"class":279},[273,413,415,417,419],{"class":275,"line":414},11,[273,416,330],{"class":279},[273,418,349],{"class":283},[273,420,301],{"class":279},[238,422,424],{"id":423},"what-it-does","What it does",[426,427,428],"ul",{},[429,430,431,435],"li",{},[432,433,434],"strong",{},"swell."," When the badge is a link or a button, hovering it grows a ring in its own colour by about 1px (on the playful preset), with a soft overshoot, so the badge plumps up like a drop of goo. The outline variant swells its border.",[206,437,438],{},"A badge that isn't interactive never moves. The swell is a CSS transition on Tailwind's shadow, so the focus ring still works alongside it.",[238,440,442],{"id":441},"variants","Variants",[206,444,445],{},"The same variants as shadcn:",[447,448,450],"preview",{":controls":449},"false",[198,451],{"set":196},[264,453,455],{"className":266,"code":454,"language":268,"meta":269,"style":269},"\u003CGoopBadge>Badge\u003C\u002FGoopBadge>\n\u003CGoopBadge variant=\"secondary\">Secondary\u003C\u002FGoopBadge>\n\u003CGoopBadge variant=\"destructive\">Destructive\u003C\u002FGoopBadge>\n\u003CGoopBadge variant=\"outline\">Outline\u003C\u002FGoopBadge>\n",[209,456,457,469,490,510],{"__ignoreMap":269},[273,458,459,461,463,465,467],{"class":275,"line":276},[273,460,280],{"class":279},[273,462,219],{"class":283},[273,464,362],{"class":279},[273,466,219],{"class":283},[273,468,301],{"class":279},[273,470,471,473,475,478,480,483,486,488],{"class":275,"line":304},[273,472,280],{"class":279},[273,474,219],{"class":283},[273,476,477],{"class":287}," variant",[273,479,294],{"class":279},[273,481,482],{"class":297},"\"secondary\"",[273,484,485],{"class":279},">Secondary\u003C\u002F",[273,487,219],{"class":283},[273,489,301],{"class":279},[273,491,492,494,496,498,500,503,506,508],{"class":275,"line":311},[273,493,280],{"class":279},[273,495,219],{"class":283},[273,497,477],{"class":287},[273,499,294],{"class":279},[273,501,502],{"class":297},"\"destructive\"",[273,504,505],{"class":279},">Destructive\u003C\u002F",[273,507,219],{"class":283},[273,509,301],{"class":279},[273,511,512,514,516,518,520,523,526,528],{"class":275,"line":327},[273,513,280],{"class":279},[273,515,219],{"class":283},[273,517,477],{"class":287},[273,519,294],{"class":279},[273,521,522],{"class":297},"\"outline\"",[273,524,525],{"class":279},">Outline\u003C\u002F",[273,527,219],{"class":283},[273,529,301],{"class":279},[206,531,532,533,536,537,540],{},"Turn the swell off with ",[209,534,535],{},":swell=\"false\"",", or scale it with a number (",[209,538,539],{},":swell=\"2\""," is about 2px).",[238,542,544],{"id":543},"props","Props",[546,547],"component-props",{"name":196},[238,549,551],{"id":550},"accessibility","Accessibility",[206,553,554,555,558,559,258],{},"The badge is whatever element you render. A link badge is a real ",[209,556,557],{},"\u003Ca>",", with your focus ring. Under reduced motion the swell is off. See ",[251,560,23],{"href":24},[562,563,564],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":269,"searchDepth":311,"depth":311,"links":566},[567,568,569,570,571,572],{"id":240,"depth":304,"text":15},{"id":261,"depth":304,"text":262},{"id":423,"depth":304,"text":424},{"id":441,"depth":304,"text":442},{"id":543,"depth":304,"text":544},{"id":550,"depth":304,"text":551},"shadcn's Badge. A badge that's a link or a button swells by about a pixel on hover, with a soft gooey overshoot. A plain badge stays still.","md",{},{"title":155,"description":573},"sutzFpYCe4C_CbQqxHdpVbHQpOxCsxci2xAxC6UxExk",[579,581],{"title":151,"path":152,"stem":153,"description":580,"children":-1},"shadcn's Skeleton with a slow goo shimmer instead of the grey pulse. A soft, low mound of lighter goo drifts across each shape.",{"title":159,"path":160,"stem":161,"description":582,"children":-1},"shadcn's Card, static by default. Add goo and the edge nearest the pointer swells gently toward it in a low, wide mound.",1793670387227]