[{"_1":2,"_56":-5,"_57":-5},"loaderData",{"_3":4,"_6":7},"root",{"_5":-5},"theme","routes/$category.$doc",{"_8":9},"document",{"_10":11,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_31":32,"_33":30,"_34":35,"_36":37,"_38":39,"_52":17,"_53":54,"_55":54},"title","Badges","category","Components","description","Badges are small labels that provide additional information about an item.","icon","TagIcon","content","\n\n## Installation\n\n\n\n\n\n\n\n## Usage\n\n```tsx\nimport { Badge } from \"@/components/ui/badge\";\n\nSecondary\n```\n\n## Props\n\n","_meta",{"_22":23,"_24":23,"_25":26,"_27":28,"_29":30},"filePath","badges.mdx","fileName","directory",".","extension","mdx","path","badges","mdxSource","var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var g=(l,s)=>()=>(s||l((s={exports:{}}).exports,s),s.exports),B=(l,s)=>{for(var r in s)a(l,r,{get:s[r],enumerable:!0})},h=(l,s,r,n)=>{if(s&&typeof s==\"object\"||typeof s==\"function\")for(let i of F(s))!u.call(l,i)&&i!==r&&a(l,i,{get:()=>s[i],enumerable:!(n=y(s,i))||n.enumerable});return l};var N=(l,s,r)=>(r=l!=null?p(m(l)):{},h(s||!l||!l.__esModule?a(r,\"default\",{value:l,enumerable:!0}):r,l)),C=l=>h(a({},\"__esModule\",{value:!0}),l);var t=g((D,o)=>{o.exports=_jsx_runtime});var b={};B(b,{default:()=>E});var e=N(t());function k(l){let s={a:\"a\",code:\"code\",h2:\"h2\",pre:\"pre\",span:\"span\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",...l.components},{ComponentPreview:r,InstallWithSource:n,ReactDoc:i,ShowSource:d}=s;return r||c(\"ComponentPreview\",!0),n||c(\"InstallWithSource\",!0),i||c(\"ReactDoc\",!0),d||c(\"ShowSource\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(r,{component:\"badges\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(s.pre,{className:\"shiki shiki-themes github-light github-dark\",style:{whiteSpace:\"pre-wrap\"},tabIndex:\"0\",\"data-language\":\"tsx\",children:(0,e.jsxs)(s.code,{children:[(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"import\"}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" { Badge } \"}),(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"from\"}),(0,e.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"@/registry/components/badge\"'}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\";\"})]}),`\n`,(0,e.jsx)(s.span,{className:\"line\"}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"const\"}),(0,e.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" BadgesExample\"}),(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" =\"}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" () \"}),(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=>\"}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" {\"})]}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" return\"}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" (\"})]}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" <\"}),(0,e.jsx)(s.span,{style:{color:\"#22863A\",\"--shiki-dark\":\"#85E89D\"},children:\"div\"}),(0,e.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" className\"}),(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,e.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:'\"flex flex-wrap items-center space-x-2\"'}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\">\"})]}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" <\"}),(0,e.jsx)(s.span,{style:{color:\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"Badge\"}),(0,e.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" variant\"}),(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,e.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:'\"default\"'}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\">Default\"})]}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" <\"}),(0,e.jsx)(s.span,{style:{color:\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"Badge\"}),(0,e.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" variant\"}),(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,e.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:'\"destructive\"'}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\">Destructive\"})]}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" <\"}),(0,e.jsx)(s.span,{style:{color:\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"Badge\"}),(0,e.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" variant\"}),(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,e.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:'\"outline\"'}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\">Outline\"})]}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" <\"}),(0,e.jsx)(s.span,{style:{color:\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"Badge\"}),(0,e.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" variant\"}),(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,e.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:'\"secondary\"'}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\">Secondary\"})]}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" <\"}),(0,e.jsx)(s.span,{style:{color:\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"Badge\"}),(0,e.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" variant\"}),(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,e.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:'\"success\"'}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\">Success\"})]}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" <\"}),(0,e.jsx)(s.span,{style:{color:\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"Badge\"}),(0,e.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" variant\"}),(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,e.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:'\"warning\"'}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\">Warning\"})]}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" \"})]}),`\n`,(0,e.jsx)(s.span,{className:\"line\",children:(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" );\"})}),`\n`,(0,e.jsx)(s.span,{className:\"line\",children:(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"};\"})}),`\n`,(0,e.jsx)(s.span,{className:\"line\"}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"export\"}),(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" default\"}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" BadgesExample;\"})]})]})})})}),`\n`,(0,e.jsxs)(s.h2,{id:\"installation\",children:[(0,e.jsx)(s.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#installation\",children:(0,e.jsx)(s.span,{className:\"icon icon-link\"})}),\"Installation\"]}),`\n`,(0,e.jsx)(n,{component:\"badges\",children:(0,e.jsx)(d,{component:\"badges\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(s.pre,{className:\"shiki shiki-themes github-light github-dark\",style:{whiteSpace:\"pre-wrap\"},tabIndex:\"0\",\"data-language\":\"tsx\",children:(0,e.jsxs)(s.code,{children:[(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"import\"}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" { cn } \"}),(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"from\"}),(0,e.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"@/utils/cn\"'}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\";\"})]}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"import\"}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" { cva, \"}),(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"type\"}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" VariantProps } \"}),(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"from\"}),(0,e.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"class-variance-authority\"'}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\";\"})]}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"import\"}),(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" type\"}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" { HTMLAttributes } \"}),(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"from\"}),(0,e.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"react\"'}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\";\"})]}),`\n`,(0,e.jsx)(s.span,{className:\"line\"}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"const\"}),(0,e.jsx)(s.span,{style:{color:\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" badgeVariants\"}),(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" =\"}),(0,e.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" cva\"}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(\"})]}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"inline-flex cursor-default items-center space-x-2 rounded-md border text-xs font-medium transition-colors focus:outline-none w-fit\"'}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,e.jsx)(s.span,{className:\"line\",children:(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" {\"})}),`\n`,(0,e.jsx)(s.span,{className:\"line\",children:(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" variants: {\"})}),`\n`,(0,e.jsx)(s.span,{className:\"line\",children:(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" variant: {\"})}),`\n`,(0,e.jsx)(s.span,{className:\"line\",children:(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" default:\"})}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"border-transparent bg-neutral-900 text-neutral-50 shadow hover:bg-neutral-900/80 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50/80\"'}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,e.jsx)(s.span,{className:\"line\",children:(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" secondary:\"})}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"border-transparent bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80\"'}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,e.jsx)(s.span,{className:\"line\",children:(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" outline:\"})}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"text-neutral-950 border-neutral-200 hover:bg-neutral-100 dark:text-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-800 hover:border-neutral-300 dark:hover:border-neutral-700\"'}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,e.jsx)(s.span,{className:\"line\",children:(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" destructive:\"})}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"border-transparent bg-red-500 text-neutral-50 shadow hover:bg-red-500/80 dark:bg-red-900 dark:text-neutral-50 dark:hover:bg-red-900/80\"'}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,e.jsx)(s.span,{className:\"line\",children:(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" success:\"})}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"border-transparent bg-green-500 text-neutral-50 shadow hover:bg-green-500/80 dark:bg-green-900 dark:text-neutral-50 dark:hover:bg-green-900/80\"'}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,e.jsx)(s.span,{className:\"line\",children:(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" warning:\"})}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"border-transparent bg-yellow-500 text-neutral-900 shadow hover:bg-yellow-500/80 dark:bg-yellow-900 dark:text-neutral-50 dark:hover:bg-yellow-900/80\"'}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,e.jsx)(s.span,{className:\"line\",children:(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" },\"})}),`\n`,(0,e.jsx)(s.span,{className:\"line\",children:(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" size: {\"})}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" sm: \"}),(0,e.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:'\"px-2 py-0.5 text-xs\"'}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" md: \"}),(0,e.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:'\"px-2.5 py-1 text-xs\"'}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" lg: \"}),(0,e.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:'\"px-3 py-1 text-sm\"'}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,e.jsx)(s.span,{className:\"line\",children:(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" },\"})}),`\n`,(0,e.jsx)(s.span,{className:\"line\",children:(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" },\"})}),`\n`,(0,e.jsx)(s.span,{className:\"line\",children:(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" defaultVariants: {\"})}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" variant: \"}),(0,e.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:'\"default\"'}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" size: \"}),(0,e.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:'\"md\"'}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,e.jsx)(s.span,{className:\"line\",children:(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" },\"})}),`\n`,(0,e.jsx)(s.span,{className:\"line\",children:(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" },\"})}),`\n`,(0,e.jsx)(s.span,{className:\"line\",children:(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\");\"})}),`\n`,(0,e.jsx)(s.span,{className:\"line\"}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"export\"}),(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" interface\"}),(0,e.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" BadgeProps\"})]}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" extends\"}),(0,e.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" HTMLAttributes\"}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"<\"}),(0,e.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"HTMLDivElement\"}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\">,\"})]}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" VariantProps\"}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"<\"}),(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"typeof\"}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" badgeVariants> {}\"})]}),`\n`,(0,e.jsx)(s.span,{className:\"line\"}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"function\"}),(0,e.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" Badge\"}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"({ \"}),(0,e.jsx)(s.span,{style:{color:\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},children:\"className\"}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\", \"}),(0,e.jsx)(s.span,{style:{color:\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},children:\"variant\"}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\", \"}),(0,e.jsx)(s.span,{style:{color:\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},children:\"size\"}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\", \"}),(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"...\"}),(0,e.jsx)(s.span,{style:{color:\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},children:\"props\"}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" }\"}),(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\":\"}),(0,e.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" BadgeProps\"}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\") {\"})]}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" return\"}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" (\"})]}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" <\"}),(0,e.jsx)(s.span,{style:{color:\"#22863A\",\"--shiki-dark\":\"#85E89D\"},children:\"div\"})]}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" className\"}),(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"{\"}),(0,e.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"cn\"}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(\"}),(0,e.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"badgeVariants\"}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"({ variant, size }), className)}\"})]}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" {\"}),(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"...\"}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"props}\"})]}),`\n`,(0,e.jsx)(s.span,{className:\"line\",children:(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" />\"})}),`\n`,(0,e.jsx)(s.span,{className:\"line\",children:(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" );\"})}),`\n`,(0,e.jsx)(s.span,{className:\"line\",children:(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"}\"})}),`\n`,(0,e.jsx)(s.span,{className:\"line\"}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"export\"}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" { Badge, badgeVariants };\"})]})]})})})})}),`\n`,(0,e.jsxs)(s.h2,{id:\"usage\",children:[(0,e.jsx)(s.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#usage\",children:(0,e.jsx)(s.span,{className:\"icon icon-link\"})}),\"Usage\"]}),`\n`,(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(s.pre,{className:\"shiki shiki-themes github-light github-dark\",style:{whiteSpace:\"pre-wrap\"},tabIndex:\"0\",\"data-language\":\"tsx\",children:(0,e.jsxs)(s.code,{children:[(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"import\"}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" { Badge } \"}),(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"from\"}),(0,e.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"@/components/ui/badge\"'}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\";\"})]}),`\n`,(0,e.jsx)(s.span,{className:\"line\"}),`\n`,(0,e.jsxs)(s.span,{className:\"line\",children:[(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"<\"}),(0,e.jsx)(s.span,{style:{color:\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"Badge\"}),(0,e.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" variant\"}),(0,e.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,e.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:'\"secondary\"'}),(0,e.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\">Secondary\"})]})]})})}),`\n`,(0,e.jsxs)(s.h2,{id:\"props\",children:[(0,e.jsx)(s.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#props\",children:(0,e.jsx)(s.span,{className:\"icon icon-link\"})}),\"Props\"]}),`\n`,(0,e.jsx)(i,{component:\"badges\",children:(0,e.jsxs)(s.table,{children:[(0,e.jsx)(s.thead,{children:(0,e.jsxs)(s.tr,{children:[(0,e.jsx)(s.th,{children:\"Prop\"}),(0,e.jsx)(s.th,{children:\"Type\"}),(0,e.jsx)(s.th,{children:\"Required\"})]})}),(0,e.jsxs)(s.tbody,{children:[(0,e.jsxs)(s.tr,{children:[(0,e.jsx)(s.td,{children:\"variant\"}),(0,e.jsx)(s.td,{children:'\"default\" | \"secondary\" | \"outline\" | \"destructive\" | \"success\" | \"warning\"'}),(0,e.jsx)(s.td,{children:\"No\"})]}),(0,e.jsxs)(s.tr,{children:[(0,e.jsx)(s.td,{children:\"size\"}),(0,e.jsx)(s.td,{children:'\"sm\" | \"md\" | \"lg\"'}),(0,e.jsx)(s.td,{children:\"No\"})]}),(0,e.jsx)(s.tr,{children:(0,e.jsx)(s.td,{colSpan:\"4\",children:\"Included: DOMAttributes\"})})]})]})})]})}function E(l={}){let{wrapper:s}=l.components||{};return s?(0,e.jsx)(s,{...l,children:(0,e.jsx)(k,{...l})}):k(l)}function c(l,s){throw new Error(\"Expected \"+(s?\"component\":\"object\")+\" `\"+l+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return C(b);})();\n;return Component;","slug","url","/components/badges","rawUrl","/components/badges/raw","toc",[40,46,49],{"_41":42,"_43":44,"_33":45},"level",2,"text","Installation","installation",{"_41":42,"_43":47,"_33":48},"Usage","usage",{"_41":42,"_43":50,"_33":51},"Props","props","lucideIcon","createdAt","2025-07-31T20:56:24.532Z","updatedAt","actionData","errors"]

Prop	Type	Required
variant	"default" \| "secondary" \| "outline" \| "destructive" \| "success" \| "warning"	No
size	"sm" \| "md" \| "lg"	No
Included: DOMAttributes<HTMLDivElement>

Command Palette

Badges

Installation

Usage

Props