) } export { Badge, badgeVariants } `,__src__:"registry/default/ui/badge.tsx",__style__:"default",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" *"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" as"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "react"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" cva"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" type"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" VariantProps "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "class-variance-authority"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" cn "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "@/lib/utils"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" badgeVariants "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" cva"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "inline-flex items-center rounded-full border-2 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" variants"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" variant"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "bg-popover text-primary"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" secondary"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "border-transparent bg-popover text-primary"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" filled"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "bg-primary text-background"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" destructive"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "border-destructive bg-destructive/10 text-destructive"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "destructive-filled"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "border-destructive bg-destructive text-foreground"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" defaultVariants"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" variant"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "default"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:")"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" interface"}),(0,n.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" BadgeProps"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" extends"}),(0,n.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" React"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLAttributes"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLDivElement"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:">,"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" VariantProps"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:""}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {}"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" Badge"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"({"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" variant"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" ..."}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"props "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}:"}),(0,n.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" BadgeProps"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"div className"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"cn"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"badgeVariants"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"({"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" variant "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}),"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:")}"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {..."}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" Badge"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" badgeVariants "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})]})]})})})}),(0,n.jsx)(r,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,n.jsxs)(e.h2,{id:"usage",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Badge } from "@/components/ui/badge" `,children:(0,n.jsx)(e.code,{"data-language":"tsx","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" Badge "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "@/components/ui/badge"'})]})})})}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`Badge `,children:(0,n.jsx)(e.code,{"data-language":"tsx","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Badge variant"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'"default"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Badge"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:""})]})})})}),` `,(0,n.jsxs)(e.h3,{id:"link",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#link",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Link"]}),` `,(0,n.jsxs)(e.p,{children:["You can use the ",(0,n.jsx)(e.code,{children:"badgeVariants"})," helper to create a link that looks like a badge."]}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { badgeVariants } from "@/components/ui/badge" `,children:(0,n.jsx)(e.code,{"data-language":"tsx","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" badgeVariants "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "@/components/ui/badge"'})]})})})}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`Badge `,children:(0,n.jsx)(e.code,{"data-language":"tsx","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Link className"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"badgeVariants"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"({"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" variant"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "outline"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" })}>"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Badge"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:""})]})})})}),` `,(0,n.jsxs)(e.h2,{id:"examples",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#examples",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Examples"]}),` `,(0,n.jsxs)(e.h3,{id:"default",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#default",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Default"]}),` `,(0,n.jsx)(a,{name:"badge-demo",description:"A badge",children:(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Badge } from "@/components/ui/badge" export function BadgeDemo() { return Badge } `,__src__:"registry/default/example/badge-demo.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" Badge "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "@/components/ui/badge"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" BadgeDemo"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"()"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Badge"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Badge"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})})]})})})}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsxs)(e.h3,{id:"secondary",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#secondary",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Secondary"]}),` `,(0,n.jsx)(a,{name:"badge-secondary",description:"A badge using secondary as variant.",children:(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Badge } from "@/components/ui/badge" export function BadgeSecondary() { return Secondary } `,__src__:"registry/default/example/badge-secondary.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" Badge "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "@/components/ui/badge"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" BadgeSecondary"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"()"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Badge variant"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'"secondary"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Secondary"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})})]})})})}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsxs)(e.h3,{id:"filled",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#filled",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Filled"]}),` `,(0,n.jsx)(a,{name:"badge-filled",description:"A badge using filled as variant.",children:(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Badge } from "@/components/ui/badge" export function BadgeFilled() { return Filled } `,__src__:"registry/default/example/badge-filled.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" Badge "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "@/components/ui/badge"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" BadgeFilled"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"()"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Badge variant"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'"filled"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Filled"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})})]})})})}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsxs)(e.h3,{id:"destructive",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#destructive",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Destructive"]}),` `,(0,n.jsx)(a,{name:"badge-destructive",description:"A destructive badge.",children:(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Badge } from "@/components/ui/badge" export function BadgeDestructive() { return Destructive } `,__src__:"registry/default/example/badge-destructive.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" Badge "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "@/components/ui/badge"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" BadgeDestructive"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"()"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Badge variant"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'"destructive"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Destructive"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})})]})})})}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsxs)(e.h3,{id:"destructive-filled",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#destructive-filled",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Destructive Filled"]}),` `,(0,n.jsx)(a,{name:"badge-destructive-filled",description:"A destructive badge using filled as variant.",children:(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Badge } from "@/components/ui/badge" export function BadgeDestructiveFilled() { return Destructive } `,__src__:"registry/default/example/badge-destructive-filled.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" Badge "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "@/components/ui/badge"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" BadgeDestructiveFilled"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"()"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Badge variant"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'"destructive-filled"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Destructive"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})})]})})})})]})}function u(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(g,{...l})}):g(l)}function s(l,e){throw new Error("Expected "+(e?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return w(L);})(); ;return Component;

Badge

Installation

Usage

Link

Examples

Default

Secondary

Filled

Destructive

Destructive Filled