Default Secondary Outline Destructive Warning Success

) } export BadgeDemo`,__src__:"registry/default/example/badge/badge-demo.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"vesper",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" { Badge } "}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:' "@/components/ui/badge"'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:" BadgeDemo"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:'"flex flex-wrap gap-2"'}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:"Badge"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Default"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:""})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:"Badge"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" variant="}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:'"secondary"'}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Secondary"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:""})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:"Badge"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" variant="}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:'"outline"'}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Outline"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:""})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:"Badge"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" variant="}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:'"destructive"'}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Destructive"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:""})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:"Badge"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" variant="}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:'"warning"'}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Warning"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:""})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:"Badge"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" variant="}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:'"success"'}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Success"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:""})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" BadgeDemo"})]})]})})}),(0,n.jsx)(e.figure,{__src__:"registry/new-york/example/badge/badge-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#101010",color:"#FFF"},tabIndex:"0","data-language":"tsx","data-theme":"vesper",__rawString__:`import { Badge } from "@/components/ui/badge" export function BadgeDemo() { return (

Default Secondary Outline Destructive Warning Success

) } export BadgeDemo`,__src__:"registry/new-york/example/badge/badge-demo.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"vesper",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" { Badge } "}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:' "@/components/ui/badge"'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:" BadgeDemo"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:'"flex flex-wrap gap-2"'}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:"Badge"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Default"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:""})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:"Badge"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" variant="}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:'"secondary"'}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Secondary"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:""})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:"Badge"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" variant="}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:'"outline"'}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Outline"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:""})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:"Badge"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" variant="}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:'"destructive"'}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Destructive"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:""})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:"Badge"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" variant="}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:'"warning"'}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Warning"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:""})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:"Badge"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" variant="}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:'"success"'}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Success"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:""})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" BadgeDemo"})]})]})})})]}),` `,(0,n.jsxs)(e.h2,{id:"installation",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsxs)(o,{children:[(0,n.jsx)(a,{children:"Copy and paste the following code into your project: badge.tsx"}),(0,n.jsxs)(s,{name:"badge",children:[(0,n.jsx)(e.figure,{__src__:"registry/default/ui/badge.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#101010",color:"#FFF"},tabIndex:"0","data-language":"tsx","data-theme":"vesper",__rawString__:`import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center gap-x-1 whitespace-nowrap rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset", { variants: { variant: { default: "bg-primary bg-gradient-to-tl from-primary via-primary via-primary to-primary-light/30 dark:bg-gradient-to-tl dark:from-primary dark:via-primary dark:to-primary-dark text-primary-foreground ring-primary", secondary: "bg-secondary ring-secondary text-secondary-foreground dark:bg-secondary dark:text-secondary-foreground", destructive: "bg-destructive/10 backdrop-blur-lg text-destructive ring-destructive dark:bg-destructive/20 dark:text-destructive-foreground dark:ring-destructive/30", outline: "text-foreground ring-border", success: "bg-emerald-500/10 backdrop-blur-lg text-emerald-700 ring-emerald-500/20 dark:bg-emerald-500/20 dark:text-emerald-300 dark:ring-emerald-500/30", warning: "bg-yellow-500/10 backdrop-blur-lg text-yellow-700 ring-yellow-500/20 dark:bg-yellow-500/20 dark:text-yellow-300 dark:ring-yellow-500/30", }, }, defaultVariants: { variant: "default", }, } ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return (

) } export { Badge, badgeVariants }`,__src__:"registry/default/ui/badge.tsx",__style__:"default",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"vesper",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" * "}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"as"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:' "react"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" { cva, "}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"type"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" VariantProps } "}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:' "class-variance-authority"'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" { cn } "}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:' "@/lib/utils"'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" badgeVariants "}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:" cva"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:' "inline-flex items-center gap-x-1 whitespace-nowrap rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset"'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" {"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" variants: {"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" variant: {"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" default: "}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:'"bg-primary bg-gradient-to-tl from-primary via-primary via-primary to-primary-light/30 dark:bg-gradient-to-tl dark:from-primary dark:via-primary dark:to-primary-dark text-primary-foreground ring-primary"'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" secondary: "}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:'"bg-secondary ring-secondary text-secondary-foreground dark:bg-secondary dark:text-secondary-foreground"'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" destructive: "}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:'"bg-destructive/10 backdrop-blur-lg text-destructive ring-destructive dark:bg-destructive/20 dark:text-destructive-foreground dark:ring-destructive/30"'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" outline: "}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:'"text-foreground ring-border"'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" success: "}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:'"bg-emerald-500/10 backdrop-blur-lg text-emerald-700 ring-emerald-500/20 dark:bg-emerald-500/20 dark:text-emerald-300 dark:ring-emerald-500/30"'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" warning: "}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:'"bg-yellow-500/10 backdrop-blur-lg text-yellow-700 ring-yellow-500/20 dark:bg-yellow-500/20 dark:text-yellow-300 dark:ring-yellow-500/30"'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" },"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" },"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" defaultVariants: {"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" variant: "}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:'"default"'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" },"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" }"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:")"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" interface"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:" BadgeProps"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" extends"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:" React"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:".HTMLAttributes<"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:"HTMLDivElement"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:">,"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" VariantProps<"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"typeof"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" badgeVariants> {}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:" Badge"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"({ className, variant, "}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"props }"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:" BadgeProps"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:") {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" className={"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:"cn"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:"badgeVariants"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"({ variant }), className)"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" {..."}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" />"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" { Badge, badgeVariants }"})]})]})})}),(0,n.jsx)(e.figure,{__src__:"registry/new-york/ui/badge.tsx",__style__:"new-york","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#101010",color:"#FFF"},tabIndex:"0","data-language":"tsx","data-theme":"vesper",__rawString__:`import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center gap-x-1 whitespace-nowrap rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset", { variants: { variant: { default: "before:bg-background bg-gradient-to-br from-primary via-primary-middle to-primary-dark dark:bg-gradient-to-br dark:from-primary-dark dark:via-primary dark:to-primary-dark text-primary-foreground ring-primary", secondary: "bg-secondary ring-secondary text-secondary-foreground dark:bg-secondary dark:text-secondary-foreground", destructive: "bg-destructive/10 text-destructive ring-destructive dark:bg-destructive/20 dark:text-destructive-foreground dark:ring-destructive/30", outline: "text-foreground ring-border", success: "bg-emerald-500/10 text-emerald-700 ring-emerald-500/20 dark:bg-emerald-500/20 dark:text-emerald-300 dark:ring-emerald-500/30", warning: "bg-yellow-500/10 text-yellow-700 ring-yellow-500/20 dark:bg-yellow-500/20 dark:text-yellow-300 dark:ring-yellow-500/30", }, }, defaultVariants: { variant: "default", }, } ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return (

) } export { Badge, badgeVariants }`,__src__:"registry/new-york/ui/badge.tsx",__style__:"new-york",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"vesper",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" * "}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"as"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:' "react"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" { cva, "}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"type"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" VariantProps } "}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:' "class-variance-authority"'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" { cn } "}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:' "@/lib/utils"'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" badgeVariants "}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:" cva"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:' "inline-flex items-center gap-x-1 whitespace-nowrap rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset"'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" {"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" variants: {"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" variant: {"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" default: "}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:'"before:bg-background bg-gradient-to-br from-primary via-primary-middle to-primary-dark dark:bg-gradient-to-br dark:from-primary-dark dark:via-primary dark:to-primary-dark text-primary-foreground ring-primary"'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" secondary: "}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:'"bg-secondary ring-secondary text-secondary-foreground dark:bg-secondary dark:text-secondary-foreground"'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" destructive: "}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:'"bg-destructive/10 text-destructive ring-destructive dark:bg-destructive/20 dark:text-destructive-foreground dark:ring-destructive/30"'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" outline: "}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:'"text-foreground ring-border"'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" success: "}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:'"bg-emerald-500/10 text-emerald-700 ring-emerald-500/20 dark:bg-emerald-500/20 dark:text-emerald-300 dark:ring-emerald-500/30"'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" warning: "}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:'"bg-yellow-500/10 text-yellow-700 ring-yellow-500/20 dark:bg-yellow-500/20 dark:text-yellow-300 dark:ring-yellow-500/30"'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" },"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" },"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" defaultVariants: {"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" variant: "}),(0,n.jsx)(e.span,{style:{color:"#99FFE4"},children:'"default"'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" },"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" }"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:")"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" interface"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:" BadgeProps"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" extends"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:" React"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:".HTMLAttributes<"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:"HTMLDivElement"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:">,"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" VariantProps<"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"typeof"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" badgeVariants> {}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:" Badge"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"({ className, variant, "}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"props }"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:" BadgeProps"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:") {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" className={"}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:"cn"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#FFC799"},children:"badgeVariants"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"({ variant }), className)"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" {..."}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:" />"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A0A0A0"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" { Badge, badgeVariants }"})]})]})})})]}),(0,n.jsx)(a,{children:"Update the import paths to match your project setup."})]}),` `,(0,n.jsxs)(e.h2,{id:"props",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Prop"}),(0,n.jsx)(e.th,{children:"Type"}),(0,n.jsx)(e.th,{children:"Default"}),(0,n.jsx)(e.th,{children:"Description"})]})}),(0,n.jsx)(e.tbody,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:"variant"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:'"default" | "secondary" | "destructive" | "outline" | "success" | "warning"'})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:'"default"'})}),(0,n.jsx)(e.td,{children:"Sets the visual style of the badge"})]})})]})]})}function h(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(F,{...r})}):F(r)}function c(r,e){throw new Error("Expected "+(e?"component":"object")+" `"+r+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(B);})(); ;return Component;