var Component=(()=>{var s=Object.create;var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var B=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),f=(n,e)=>{for(var t in e)r(n,t,{get:e[t],enumerable:!0})},g=(n,e,t,u)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of p(e))!T.call(n,l)&&l!==t&&r(n,l,{get:()=>e[l],enumerable:!(u=h(e,l))||u.enumerable});return n};var x=(n,e,t)=>(t=n!=null?s(m(n)):{},g(e||!n||!n.__esModule?r(t,"default",{value:n,enumerable:!0}):t,n)),C=n=>g(r({},"__esModule",{value:!0}),n);var c=B((j,a)=>{a.exports=_jsx_runtime});var v={};f(v,{default:()=>d,frontmatter:()=>G});var o=x(c()),G={id:"togger-button",title:"ToggleButton",description:"Toggle between different states in your app with either a checkbox or radio mode."};function i(n){let e={code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...n.components},{ComponentLinks:t}=e;return t||b("ComponentLinks",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t,{pro:{gumroad:!0}}),` `,(0,o.jsx)(e.h2,{id:"import",children:"Import"}),` `,(0,o.jsxs)(e.ul,{children:[` `,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:"ToggleButton"}),": A button extended with an ",(0,o.jsx)(e.code,{children:"isChecked"})," state to show on/off."]}),` `,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:"ToggleButtonGroup"}),": Used to group toggle buttons whose actions are related, that also flushes them together."]}),` `]}),` `,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-ts",children:`import { ToggleButton, ToggleButtonGroup } from '@saas-ui-pro/react' `})}),` `,(0,o.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,o.jsx)(e.h3,{id:"checkbox-group",children:"Checkbox group"}),` `,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-jsx",children:`import { ToggleButton, ToggleButtonGroup } from '@saas-ui-pro/react' export default function CheckboxGroup() { return ( console.log(e)} > Leads Customers ) } `})}),` `,(0,o.jsx)(e.h3,{id:"radio",children:"Radio"}),` `,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-jsx",children:`import { ToggleButton, ToggleButtonGroup } from '@saas-ui-pro/react' export default function RadioGroup() { return ( console.log(e)} > All Leads Customers ) } `})}),` `,(0,o.jsx)(e.h3,{id:"colorscheme",children:"Colorscheme"}),` `,(0,o.jsxs)(e.p,{children:["A ",(0,o.jsx)(e.code,{children:"colorScheme"})," can be passed to ",(0,o.jsx)(e.code,{children:"ToggleButtonGroup"})," to modify the theme of all of the child buttons."]}),` `,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-jsx",children:`import { ToggleButton, ToggleButtonGroup } from '@saas-ui-pro/react' export default function ColorScheme() { return ( console.log(e)} > All Leads Customers ) } `})}),` `,(0,o.jsx)(e.h3,{id:"variants",children:"Variants"}),` `,(0,o.jsxs)(e.p,{children:["Supported variants are ",(0,o.jsx)(e.code,{children:"outline"})," (default) and ",(0,o.jsx)(e.code,{children:"ghost"}),"."]}),` `,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-jsx",children:`import { ToggleButton, ToggleButtonGroup } from '@saas-ui-pro/react' export default function Variants() { return ( console.log(e)} > All Leads Customers ) } `})})]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(i,{...n})}):i(n)}function b(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return C(v);})(); ;return Component;