Default Outlined Solid Surface

); } `,"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" { Badge } "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"@/components/retroui/Badge"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" default"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#62E884"},children:" BadgeStyleVariants"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"space-x-4"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Badge"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">Default"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Badge"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" variant"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"outline"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">Outlined"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Badge"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" variant"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"solid"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">Solid"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Badge"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" variant"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"surface"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">Surface"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)(e.h3,{id:"rounded",children:"Rounded"}),` `,(0,l.jsx)(r,{name:"badge-style-rounded",children:(0,l.jsx)(e.figure,{__src__:"preview/components/badge-style-rounded.tsx",__rawString__:`import { Badge } from "@/components/retroui/Badge"; export default function BadgeStyleRounded() { return (

Rounded Full

); } `,"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" { Badge } "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"@/components/retroui/Badge"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" default"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#62E884"},children:" BadgeStyleRounded"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"space-x-4"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Badge"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" variant"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"solid"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"rounded-sm"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" Rounded"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Badge"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" variant"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"solid"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"rounded-full"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" Full"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)(e.h3,{id:"sizes",children:"Sizes"}),` `,(0,l.jsx)(r,{name:"badge-style-sizes",children:(0,l.jsx)(e.figure,{__src__:"preview/components/badge-style-sizes.tsx",__rawString__:`import { Badge } from "@/components/retroui/Badge"; export default function BadgeStyleVariants() { return (

small medium large

); } `,"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" { Badge } "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"@/components/retroui/Badge"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" default"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#62E884"},children:" BadgeStyleVariants"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"space-x-4"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Badge"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" size"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"sm"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">small"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Badge"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">medium"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Badge"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" size"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"lg"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">large"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})})]})}function D(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,Object.assign({},n,{children:(0,l.jsx)(p,n)})):p(n)}var S=D;function s(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return C(x);})(); ;return Component;

Badge

Examples

Default

Variants

Rounded

Sizes