var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var f=(e,l)=>()=>(l||e((l={exports:{}}).exports,l),l.exports),m=(e,l)=>{for(var r in l)a(e,r,{get:l[r],enumerable:!0})},s=(e,l,r,t)=>{if(l&&typeof l=="object"||typeof l=="function")for(let o of y(l))!E.call(e,o)&&o!==r&&a(e,o,{get:()=>l[o],enumerable:!(t=F(l,o))||t.enumerable});return e};var C=(e,l,r)=>(r=e!=null?h(u(e)):{},s(l||!e||!e.__esModule?a(r,"default",{value:e,enumerable:!0}):r,e)),g=e=>s(a({},"__esModule",{value:!0}),e);var d=f((S,i)=>{i.exports=_jsx_runtime});var D={};m(D,{default:()=>x,frontmatter:()=>b});var n=C(d()),b={title:"Button",description:"This bold button makes sure your users click on it and perform the actions you want! \u{1F680}",lastUpdated:"05 Apr, 2025",links:{source:"https://github.com/Logging-Stuff/RetroUI/blob/main/components/retroui/Buttons/Button.tsx"}};function p(e){let l=Object.assign({figure:"figure",pre:"pre",code:"code",span:"span",h4:"h4",h2:"h2",h3:"h3"},e.components),{ComponentShowcase:r,ComponentInstall:t,ComponentSource:o}=l;return t||c("ComponentInstall",!0),t.Cli||c("ComponentInstall.Cli",!0),t.Manual||c("ComponentInstall.Manual",!0),r||c("ComponentShowcase",!0),o||c("ComponentSource",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(r,{name:"button-style-default",children:(0,n.jsx)(l.figure,{__src__:"preview/components/button-style-default.tsx",__rawString__:`import { Button } from "@/components/retroui/Button"; export default function ButtonStyleDefault() { return ; } `,"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"@/components/retroui/Button"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" default"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" ButtonStyleDefault"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">Click Me!;"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsxs)(t,{children:[(0,n.jsx)(t.Cli,{children:(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"sh","data-theme":"dracula-soft",children:(0,n.jsx)(l.code,{"data-language":"sh","data-theme":"dracula-soft",style:{display:"grid"},children:(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"npx"}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:" shadcn@latest"}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:" add"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"https://retroui.dev/r/button.json"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'})]})})})})}),(0,n.jsxs)(t.Manual,{children:[(0,n.jsx)(l.h4,{id:"1-install-dependencies",children:"1. Install dependencies:"}),(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"sh","data-theme":"dracula-soft",children:(0,n.jsx)(l.code,{"data-language":"sh","data-theme":"dracula-soft",style:{display:"grid"},children:(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"npm"}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:" install"}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:" class-variance-authority"})]})})})}),(0,n.jsx)("br",{}),(0,n.jsx)(l.h4,{id:"2-copy-the-code--into-your-project",children:"2. Copy the code \u{1F447} into your project:"}),(0,n.jsx)(o,{name:"button",children:(0,n.jsx)(l.figure,{__src__:"/retroui/components/retroui/Button.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { cn } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"@/lib/utils"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { cva, VariantProps } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"class-variance-authority"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" React, { ButtonHTMLAttributes } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"react"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" buttonVariants "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" cva"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"font-head transition-all outline-hidden cursor-pointer flex items-center"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" variants"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" default"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"shadow-md hover:shadow-xs bg-primary text-black border-2 border-black hover:bg-primary-hover"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" secondary"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"bg-black text-white shadow-primary hover:-translate-y-1 hover:shadow-md"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" outline"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"shadow-md hover:shadow-xs bg-transparent text-black border-2 border-black"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" link"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"bg-transparent text-black hover:underline hs"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" size"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" sm"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"px-4 py-1.5 text-sm"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" md"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"px-6 py-2 text-base"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" lg"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"px-8 py-3 text-lg"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" defaultVariants"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" size"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"md"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"default"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:");"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" interface"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" IButtonProps"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" extends"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" ButtonHTMLAttributes"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"HTMLButtonElement"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">,"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" VariantProps"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" buttonVariants> {}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Button "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" React."}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"forwardRef"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"HTMLButtonElement"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"IButtonProps"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">("})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" children,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" size "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"md"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" className "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' ""'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" variant "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"default"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" ..."}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"props"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" }: IButtonProps,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" forwardedRef,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ) "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"button"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{forwardedRef}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"buttonVariants"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"({ variant, size }), className)}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" >"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {children}"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ),"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:");"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"Button.displayName "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]})]})})})})]})]}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(l.h2,{id:"examples",children:"Examples"}),` `,(0,n.jsx)(l.h3,{id:"primary",children:"Primary"}),` `,(0,n.jsx)(r,{name:"button-style-default",children:(0,n.jsx)(l.figure,{__src__:"preview/components/button-style-default.tsx",__rawString__:`import { Button } from "@/components/retroui/Button"; export default function ButtonStyleDefault() { return ; } `,"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"@/components/retroui/Button"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" default"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" ButtonStyleDefault"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">Click Me!;"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(l.h3,{id:"secondary",children:"Secondary"}),` `,(0,n.jsx)(r,{name:"button-style-secondary",children:(0,n.jsx)(l.figure,{__src__:"preview/components/button-style-secondary.tsx",__rawString__:`import { Button } from "@/components/retroui/Button"; export default function ButtonStyleSecondary() { return ; } `,"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"@/components/retroui/Button"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" default"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" ButtonStyleSecondary"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"secondary"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">Click Me!;"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(l.h3,{id:"outline",children:"Outline"}),` `,(0,n.jsx)(r,{name:"button-style-outline",children:(0,n.jsx)(l.figure,{__src__:"preview/components/button-style-outline.tsx",__rawString__:`import { Button } from "@/components/retroui/Button"; export default function ButtonStyleOutline() { return ; } `,"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"@/components/retroui/Button"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" default"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" ButtonStyleOutline"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"outline"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">Click Me!;"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(l.h3,{id:"link",children:"Link"}),` `,(0,n.jsx)(r,{name:"button-style-link",children:(0,n.jsx)(l.figure,{__src__:"preview/components/button-style-link.tsx",__rawString__:`import { Button } from "@/components/retroui/Button"; export default function ButtonStyleLink() { return ; } `,"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"@/components/retroui/Button"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" default"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" ButtonStyleLink"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"link"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">Click Me!;"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(l.h3,{id:"with-icon",children:"With Icon"}),` `,(0,n.jsx)(r,{name:"button-style-with-icon",children:(0,n.jsx)(l.figure,{__src__:"preview/components/button-style-with-icon.tsx",__rawString__:`import { Button } from "@/components/retroui/Button"; import { Trash } from "lucide-react"; export default function ButtonStyleSecondary() { return ( ); } `,"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"@/components/retroui/Button"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { Trash } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"lucide-react"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" default"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" ButtonStyleSecondary"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"bg-destructive text-white hover:bg-destructive/90"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Trash"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"h-4 w-4 mr-2"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" /> Delete"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})})]})}function B(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,Object.assign({},e,{children:(0,n.jsx)(p,e)})):p(e)}var x=B;function c(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return g(D);})(); ;return Component;